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

全部圖片使用絕對定位，頁面加載的時候，用程序按順序算出他們的位置定位好

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

當拖拽完成，如果下面沒有圖片，這張圖片就返回他原來的坐標

如果有，就兩個圖片兌換坐標，用animate很簡單，你懂的

你要考慮坐標記錄的問題，可以每次拖拽用全局標量記錄

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

還有一個可能會遇到的問題就是事件起泡

js中如何拖動DIV中的圖片？

實現(xiàn)思路：

①鼠標按下+鼠標移動 → 拖拽

②鼠標松開 → 無拖拽

③鼠標偏移 → 拖拽距離

用JavaScript事件方法表示就是：

① onmousedown + onmousemove → startDrag()

② onmouseup → stopDrag()

drag.js代碼：

var?params?=?{

left:?0,

top:?0,

currentX:?0,

currentY:?0,

flag:?false

};

//獲取相關CSS屬性

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

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

};

//拖拽的實現(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是移動對象

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 拖拽后怎么得到拖拽后的圖片位置？？？

拖拽后的位置跟原來的位置是沒有變化的。

$('.brick').index($(this))就可以看出來DOM元素的坐標沒有變化。

demo：

請問jquery 有沒有 可以在一個框里拖動圖片來剪裁頭像的控件？不是在圖片上剪切。

JQUERY單獨是做不到的 只能配合服務器端進行

JQUERY只是前臺做到友好的界面而已 選中的座標傳到后臺 后臺在處理

所以。。。。。你要告訴我們 你的后臺是什么語言

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

原理很簡單的 就是獲取座標傳到后臺 然后PHP根據(jù)座標進行剪裁就可以了

Jquery如何拖動縮放底層的圖片

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

網(wǎng)站題目：jquery拖動圖片,js拖動圖片
本文地址：http://www.chinadenli.net/article20/dseoico.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、微信小程序、企業(yè)建站、網(wǎng)站建設、營銷型網(wǎng)站建設、響應式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)