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

實現(xiàn)思路：

公司主營業(yè)務：網(wǎng)站設計、網(wǎng)站建設、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出臨西免費做網(wǎng)站回饋大家。

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

②鼠標松開 → 無拖拽

③鼠標偏移 → 拖拽距離

用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特效）

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

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

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

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

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

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

JQuery的jqui里面無法操控connectToSortable橫向拖不動，只能豎著拖

如果你的li需要浮動的話，試試看給ul加一個class，例如

ul class="clearFloat"

.clearFloat的定義為（不能修改哦，親，里面的每一行都有用的）

.clearFloat:after {

visibility: hidden;

clear: both;

display: block;

height: 0px;

content: "."

}

.clearFloat {

zoom: 1;

}

這個樣式是專門用來清除浮動的。如果代碼不能恰當?shù)那宄訒斐扇萜鞔笮〉挠嬎沐e誤，導致拖動失敗

jquery如何設置拖動的活動范圍？

jquery的拖動函數(shù)有個參數(shù)控制這個，有很多活動范圍可選擇，如下：

1.containment:

[類型]選擇器, 元素, 字符串, 數(shù)組.

選擇器: 只能在選擇器約束的元素內(nèi)拖動

元素: 只能在給定的元素內(nèi)拖動

2.字符串:

parent: 只能在父容器內(nèi)拖動

document: 在當前html文檔的document下可拖動, 超出瀏覽器窗口范圍時, 自動出現(xiàn)滾動條

widow: 只能在當前瀏覽器窗口的內(nèi)容區(qū)域拖動, 拖動超出當前窗口范圍, 不會導致出現(xiàn)滾動條...

3.數(shù)組: [x1, y1, x2, y2]以[開始水平坐標, 開始垂直坐標, 結(jié)束水平坐標, 結(jié)束垂直坐標]的方式劃定一個區(qū)域, 只能在此區(qū)域內(nèi)拖動. 這種方式指定時, 值是相對當前瀏覽器窗口內(nèi)容區(qū)域左上角的偏移值.

false: 不限制拖動的活動范圍

[默認值]false

[產(chǎn)生影響]

影響指定可拖動控件的活動區(qū)域.

[代碼示例]

[初始化]

$('.selector').draggable({ containment: 'parent' });

[獲取屬性值]

var containment = $('.selector').draggable('option', 'containment');

[設置屬性值]

$('.selector').draggable('option', 'containment', 'parent');

jquery 中當鼠標被按下然后拖動,經(jīng)過一個元素,如何觸發(fā)這個元素綁定的懸浮事件呢

用h5的拖放事件。ondrag,ondragenter,ondragover,ondrop等。給你一個demo。記得自己加圖片。

!DOCTYPE?HTML

html

head

titleHTML5實現(xiàn)拖拽操作/title

meta?charset="utf-8"/

style

.album

{

border:?3px?dashed?#ccc;

float:?left;

margin:?10px;

min-height:?100px;

padding:?10px;

width:?220px;

}

/style

/head

body

div?id="info"

h2溫馨提示：可將照片直接拖到垃圾箱中/h2

/div

div?id="album"?class="album"

h2相冊/h2

img?draggable="true"?id="img1"?src="jq/audio1.png"?/

img?draggable="true"?id="img2"?src="jq/audio2.png"?/

img?draggable="true"?id="img3"?src="jq/audio3.png"?/

div?id="div1"?draggable="true"暗涌/div

/div

div?id="trash"?class="album"

h2垃圾箱/h2

h1?id="h1"?draggable="true"what/h1

/div

br/

/body

script

console.log("start");

info?=?document.getElementById("info");

src?=?document.getElementById("album");

target?=?document.getElementById("trash");

function?converse(){

target.ondragstart?=?function(e){

var?dragid?=?e.target.id;

var?divdraged?=?document.getElementById(dragid);

console.log(divdraged);

divdraged.ondragend?=?function(){

info.innerHTML?=?"h2溫馨提示：可將照片直接拖到垃圾箱中/h2";

}

e.dataTransfer.setData("div",dragid);

}

target.ondrag?=?function(){

info.innerHTML?=?"h2確認回收此垃圾/h2"

}

src.ondrop?=?function(e){

var?dragid?=?e.dataTransfer.getData("div");

console.log(dragid);

var?dragobject?=?document.getElementById(dragid);

console.log(dragobject);

dragobject.parentNode.removeChild(dragobject);

info.innerHTML?=?"h2恢復成功！/h2";

src.appendChild(dragobject);

e.preventDefault();

}

src.ondragenter?=?function(e){

e.preventDefault();

}

src.ondragover?=?function(e){

e.preventDefault();

}

}

function?init(){

src.ondragstart?=?function?(e)?{

var?dragImgId?=?e.target.id;

console.log(dragImgId);

var?dragImg?=?document.getElementById(dragImgId);

dragImg.ondragend?=?function(e){

info.innerHTML="h2溫馨提示：可將照片直接拖到垃圾箱中/h2";

};

e.dataTransfer.setData("img",dragImgId);

};

src.ondrag?=?function(e){

info.innerHTML="h2--照片正在被拖動--/h2";

}

target.ondragenter?=?function(e){

e.preventDefault();

}

target.ondragover?=?function(e){

e.preventDefault();

}

target.ondrop?=?function?(e)?{

var?draggedID?=?e.dataTransfer.getData("img");

console.log(draggedID);

var?oldElem?=?document.getElementById(draggedID);

oldElem.parentNode.removeChild(oldElem);

target.appendChild(oldElem);

info.innerHTML="h2溫馨提示：可將照片直接拖到垃圾箱中/h2";

e.preventDefault();

}

}

init();

converse();

/script

/html

jquery拖動層的工作原理

主要分三個部分，注冊Handler的Click事件

Click事件引發(fā)是開始拖動，此時注冊Document的MouseMove事件，Move的時候修改對象的位置

松開或者ESC的時候取消移動，注銷Document的Move事件

基本上所有的DragDrop都是這么實現(xiàn)的

網(wǎng)站名稱：jquery圖片拖動,jquery 拖動
文章源于：http://chinadenli.net/article42/dscsohc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、軟件開發(fā)、網(wǎng)頁設計公司、網(wǎng)站設計、ChatGPT、做網(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)