任意圖片拖拽交換位置（jquery特效）

全部圖片使用絕對(duì)定位，頁(yè)面加載的時(shí)候，用程序按順序算出他們的位置定位好

創(chuàng)新互聯(lián)建站提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)，成都品牌網(wǎng)站建設(shè)，1元廣告等致力于企業(yè)網(wǎng)站建設(shè)與公司網(wǎng)站制作，十余年的網(wǎng)站開(kāi)發(fā)和建站經(jīng)驗(yàn),助力企業(yè)信息化建設(shè)，成功案例突破上千余家,是您實(shí)現(xiàn)網(wǎng)站建設(shè)的好選擇.

當(dāng)拖拽完成，如果下面沒(méi)有圖片，這張圖片就返回他原來(lái)的坐標(biāo)

如果有，就兩個(gè)圖片兌換坐標(biāo)，用animate很簡(jiǎn)單，你懂的

你要考慮坐標(biāo)記錄的問(wèn)題，可以每次拖拽用全局標(biāo)量記錄

也可以直接記錄在圖片的屬性上

還有一個(gè)可能會(huì)遇到的問(wèn)題就是事件起泡

js中如何拖動(dòng)DIV中的圖片？

實(shí)現(xiàn)思路：

①鼠標(biāo)按下+鼠標(biāo)移動(dòng) → 拖拽

②鼠標(biāo)松開(kāi) → 無(wú)拖拽

③鼠標(biāo)偏移 → 拖拽距離

用JavaScript事件方法表示就是：

① onmousedown + onmousemove → startDrag()

② onmouseup → stopDrag()

drag.js代碼：

var?params?=?{

left:?0,

top:?0,

currentX:?0,

currentY:?0,

flag:?false

};

//獲取相關(guān)CSS屬性

var?getCss?=?function(o,key){

return?o.currentStyle??o.currentStyle[key]?:?document.defaultView.getComputedStyle(o,false)[key];?

};

//拖拽的實(shí)現(xiàn)

var?startDrag?=?function(bar,?target,?callback){

if(getCss(target,?"left")?!==?"auto"){

params.left?=?getCss(target,?"left");

}

if(getCss(target,?"top")?!==?"auto"){

params.top?=?getCss(target,?"top");

}

//o是移動(dòng)對(duì)象

bar.onmousedown?=?function(event){

params.flag?=?true;

if(!event){

event?=?window.event;

//防止IE文字選中

bar.onselectstart?=?function(){

return?false;

}??

}

var?e?=?event;

params.currentX?=?e.clientX;

params.currentY?=?e.clientY;

};

document.onmouseup?=?function(){

params.flag?=?false;

if(getCss(target,?"left")?!==?"auto"){

params.left?=?getCss(target,?"left");

}

if(getCss(target,?"top")?!==?"auto"){

params.top?=?getCss(target,?"top");

}

};

document.onmousemove?=?function(event){

var?e?=?event???event:?window.event;

if(params.flag){

var?nowX?=?e.clientX,?nowY?=?e.clientY;

var?disX?=?nowX?-?params.currentX,?disY?=?nowY?-?params.currentY;

target.style.left?=?parseInt(params.left)?+?disX?+?"px";

target.style.top?=?parseInt(params.top)?+?disY?+?"px";

}

if?(typeof?callback?==?"function")?{

callback(parseInt(params.left)?+?disX,?parseInt(params.top)?+?disY);

}

}

};

HTML/CSS

style?type="text/css"

#box{position:absolute;?left:100px;?top:100px;?padding:5px;?background:#f0f3f9;?font-size:12px;?-moz-box-shadow:2px?2px?4px?#666666;?-webkit-box-shadow:2px?2px?4px?#666666;}

#main{border:1px?solid?#a0b3d6;?background:white;}

#bar{line-height:24px;?background:#beceeb;?border-bottom:1px?solid?#a0b3d6;?padding-left:5px;?cursor:move;}

#content{width:420px;?height:250px;?padding:10px?5px;}

/style

div?id="box"

div?id="main"

div?id="bar"拖拽/div

div?id="content"

內(nèi)容……

/div

/div

/div

JS部分

script?src="drag.js"?type="text/javascript"/script

script?type="text/javascript"

var?oBox?=?document.getElementById("box");

var?oBar?=?document.getElementById("bar");

startDrag(oBar,?oBox);

/script

jQuery Gridly 拖拽后怎么得到拖拽后的圖片位置？？？

拖拽后的位置跟原來(lái)的位置是沒(méi)有變化的。

$('.brick').index($(this))就可以看出來(lái)DOM元素的坐標(biāo)沒(méi)有變化。

demo：

請(qǐng)問(wèn)jquery 有沒(méi)有 可以在一個(gè)框里拖動(dòng)圖片來(lái)剪裁頭像的控件？不是在圖片上剪切。

JQUERY單獨(dú)是做不到的 只能配合服務(wù)器端進(jìn)行

JQUERY只是前臺(tái)做到友好的界面而已 選中的座標(biāo)傳到后臺(tái) 后臺(tái)在處理

所以。。。。。你要告訴我們 你的后臺(tái)是什么語(yǔ)言

自己寫(xiě)吧 我從來(lái)不用網(wǎng)上下載的 除了超出能力太多的

原理很簡(jiǎn)單的 就是獲取座標(biāo)傳到后臺(tái) 然后PHP根據(jù)座標(biāo)進(jìn)行剪裁就可以了

Jquery如何拖動(dòng)縮放底層的圖片

HTML?

HEAD?

meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?

TITLEonMouseWheel/TITLE?

SCRIPT?

var?count?=?10;?

function?Picture()?

{?

count?=?Counting(count);?

Resize(count);?

return?false;?

}?

function?Counting(count){?

if?(event.wheelDelta?=?120)?

count++;?

else?if?(event.wheelDelta?=?-120)?

count--;?

return?count;?

}?

function?Resize(count){?

oImage.style.zoom?=?count?+?'0%';?

oCounter.innerText?=?count?+?'0%';?

}?

/SCRIPT?

/HEAD?

BODY?

div?align=center?

span?style="font-weight:bold"Size?=?

span?id="oCounter"?style="color:red;"100%/span/span?

img?id="oImage"?src="images/aaa.gif"?onmousewheel="return?Picture();"??

/div?

/BODY?

/HTML