怎么用 javascript 實(shí)現(xiàn)拖拽

javascript 實(shí)現(xiàn)拖拽實(shí)現(xiàn)原理。如下：

10多年的稷山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整稷山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“稷山網(wǎng)站設(shè)計(jì)”,“稷山網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

用JavaScript事件方法表示就是：

① onmousedown + onmousemove → startDrag()

? ② onmouseup → stopDrag()

1.首先調(diào)用js文件，如下：

script?src=""?type="text/javascript"/script

2.然后使用startDrag()方法綁定拖拽效果，startDrag()方法有兩個(gè)參數(shù)，第一個(gè)是點(diǎn)擊的對(duì)象（即點(diǎn)擊那里可以實(shí)現(xiàn)拖拽，例如彈出層的標(biāo)題欄），第二個(gè)是拖拽的對(duì)象（例如一個(gè)彈出層）。也就是startDrag(觸發(fā)拖拽對(duì)象，被拖拽對(duì)象)。

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=""?type="text/javascript"/script

script?type="text/javascript"

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

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

startDrag(oBar,?oBox);

/script

js怎么實(shí)現(xiàn)一個(gè)拖拽事件

Javascript的特點(diǎn)是dom的處理與網(wǎng)頁(yè)效果，大多數(shù)情況我們只用到了這個(gè)語(yǔ)言的最簡(jiǎn)單的功能，比如制作圖片輪播/網(wǎng)頁(yè)的tab等等，這篇文章將向你展示如何在自己的網(wǎng)頁(yè)上制作拖拽．

有很多理由讓你的網(wǎng)站加入拖拽功能，最簡(jiǎn)單的一個(gè)是數(shù)據(jù)重組．例如：你有一個(gè)序列的內(nèi)容讓用戶排序，用戶需要給每個(gè)條目進(jìn)行輸入或者用select 選擇，替代前面這個(gè)方法的就是拖拽．或許你的網(wǎng)站也需要一個(gè)用戶可以拖動(dòng)的導(dǎo)航窗口！那么這些效果都是很簡(jiǎn)單：因?yàn)槟憧梢院苋菀椎膶?shí)現(xiàn)！

網(wǎng)頁(yè)上實(shí)現(xiàn)拖拽其實(shí)也不是很復(fù)雜．第一你需要知道鼠標(biāo)坐標(biāo)，第二你需要知道用戶鼠標(biāo)點(diǎn)擊一個(gè)網(wǎng)頁(yè)元素并實(shí)現(xiàn)拖拽，最后我們要實(shí)現(xiàn)移動(dòng)這個(gè)元素．

獲取鼠標(biāo)移動(dòng)信息

第一我們需要獲取鼠標(biāo)的坐標(biāo)．我們加一個(gè)用戶函數(shù)到document.onmousemove就可以了:

Java代碼 收藏代碼

document.onmousemove = mouseMove;

function mouseMove(ev){

ev = ev || window.event;

var mousePos = mouseCoords(ev);

}

function mouseCoords(ev){

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return {

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

你首先要聲明一個(gè)evnet對(duì)象．不論何時(shí)你移動(dòng)鼠標(biāo)／點(diǎn)擊／按鍵等等，會(huì)對(duì)應(yīng)一個(gè)event的事件．在Internet Explorer里event是全局變量，會(huì)被存儲(chǔ)在window.event里． 在firefox中，或者其他瀏覽器，event事件會(huì)被相應(yīng)的自定義函數(shù)獲?。?dāng)我們將mouseMove函數(shù)賦值于document.onmousemove，mouseMove會(huì)獲取鼠標(biāo)移動(dòng)事件．

(ev = ev || window.event) 這樣讓ev在所有瀏覽器下獲取了event事件，在Firefox下"||window.event"將不起作用，因?yàn)閑v已經(jīng)有了賦值．在MSIE下ev是空的，所以ev將設(shè)置為window.event.

因?yàn)槲覀冊(cè)谶@篇文章中需要多次獲取鼠標(biāo)坐標(biāo)，所以我們?cè)O(shè)計(jì)了mouseCoords這個(gè)函數(shù)，它只包含了一個(gè)參數(shù)，就是the event.

我們需要運(yùn)行在MSIE與Firefox為首的其他瀏覽器下．Firefox以event.pageX和event.pageY來(lái)代表鼠標(biāo)相應(yīng)于文檔左上角的位置．如果你有一個(gè)500*500的窗口，而且你的鼠標(biāo)在正中間，那么paegX和pageY將是250，當(dāng)你將頁(yè)面往下滾動(dòng)500px，那么 pageY將是750.此時(shí)pageX不變，還是250.

MSIE和這個(gè)相反，MSIE將event.clientX與event.clientY來(lái)代表鼠標(biāo)與ie窗口的位置，并不是文檔．當(dāng)我們有一個(gè) 500*500的窗口，鼠標(biāo)在正中間，那么clientX與clientY也是250，如果你垂直滾動(dòng)窗口到任何位置，clientY仍然是250，因?yàn)橄鄬?duì)ie窗口并沒(méi)有變化．想得到正確的結(jié)果，我們必須加入scrollLeft與scrollTop這兩個(gè)相對(duì)于文檔鼠標(biāo)位置的屬性．最后，由于MSIE 并沒(méi)有0,0的文檔起始位置，因?yàn)橥ǔ?huì)設(shè)置2px的邊框在周?chē)吙虻膶挾劝赿ocument.body.clientLeft與 clientTop這兩個(gè)屬性中，我們?cè)偌尤脒@些到鼠標(biāo)的位置中．

很幸運(yùn)，這樣mouseCoords函數(shù)就完成了，我們不再為坐標(biāo)的事操心了．

捕捉鼠標(biāo)點(diǎn)擊

下次我們將知道鼠標(biāo)何時(shí)點(diǎn)擊與何時(shí)放開(kāi)．如果我們跳過(guò)這一步，我們?cè)谧鐾献r(shí)將永遠(yuǎn)不知道鼠標(biāo)移動(dòng)上面時(shí)的動(dòng)作，這將是惱人的與違反直覺(jué)的．

這里有兩個(gè)函數(shù)幫助我們:onmousedown與onmouseup.我們預(yù)先設(shè)置函數(shù)來(lái)接收document.onmousemove，這樣看起來(lái)很象我們會(huì)獲取document.onmousedown與document.onmouseup．但是當(dāng)我們獲取 document.onmousedown時(shí)，我們同時(shí)獲取了任何對(duì)象的點(diǎn)擊屬性如:text,images,tables等等.我們只想獲取那些需要拖拽的屬性，所以我們?cè)O(shè)置函數(shù)來(lái)獲取我們需要移動(dòng)的對(duì)象．

移動(dòng)一個(gè)元素

我們知道了怎么捕捉鼠標(biāo)移動(dòng)與點(diǎn)擊．剩下的就是移動(dòng)元素了．首先，要確定一個(gè)明確的頁(yè)面位置，css樣式表要用'absolute'.設(shè)置元素絕對(duì)位置意味著我們可以用樣式表的.top和.left來(lái)定位，可以用相對(duì)位置來(lái)定位了．我們將鼠標(biāo)的移動(dòng)全部相對(duì)頁(yè)面top-left，基于這點(diǎn)，我們可以進(jìn)行下一步了．

當(dāng)我們定義item.style.position='absolute'，所有的操作都是改變left坐標(biāo)與top坐標(biāo)，然后它移動(dòng)了．

Java代碼 收藏代碼

document.onmousemove = mouseMove;

document.onmouseup = mouseUp;

var dragObject = null;

var mouseOffset = null;

function getMouseOffset(target, ev){

ev = ev || window.event;

var docPos = getPosition(target);

var mousePos = mouseCoords(ev);

return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};

}

function getPosition(e){

var left = 0;

var top = 0;

while (e.offsetParent){

left += e.offsetLeft;

top += e.offsetTop;

e = e.offsetParent;

}

left += e.offsetLeft;

top += e.offsetTop;

return {x:left, y:top};

}

function mouseMove(ev){

ev = ev || window.event;

var mousePos = mouseCoords(ev);

if(dragObject){

dragObject.style.position = 'absolute';

dragObject.style.top = mousePos.y - mouseOffset.y;

dragObject.style.left = mousePos.x - mouseOffset.x;

return false;

}

}

function mouseUp(){

dragObject = null;

}

function makeDraggable(item){

if(!item) return;

item.onmousedown = function(ev){

dragObject = this;

mouseOffset = getMouseOffset(this, ev);

return false;

}

}

你會(huì)注意到這個(gè)代碼幾乎是前面的全集，將前面的合在一起就實(shí)現(xiàn)了拖拽效果了．

當(dāng)我們點(diǎn)擊一個(gè)item時(shí)，我們就獲取了很多變量，如鼠標(biāo)位置，鼠標(biāo)位置自然就包含了那個(gè)item的坐標(biāo)信息了．如果我們點(diǎn)擊了一個(gè)20*20px圖像的正中間，那么鼠標(biāo)的相對(duì)坐標(biāo)為{x:10,y:10}．當(dāng)我們點(diǎn)擊這個(gè)圖像的左上角那么鼠標(biāo)的相對(duì)坐標(biāo)為 {x:0,y:0}.當(dāng)我們點(diǎn)擊時(shí)，我們用這個(gè)方法取得一些鼠標(biāo)與圖片校對(duì)的信息．如果我們不能加載頁(yè)面item，那么信息將是document信息，會(huì)忽略了點(diǎn)擊的item信息．

mouseOffset函數(shù)使用了另一個(gè)函數(shù)getPosition.getPosition的作用是返回 item相對(duì)頁(yè)面左上角的坐標(biāo)，如果我們嘗試獲取item.offsetLeft或者item.style.left，那么我們將取得item相對(duì)與父級(jí)的位置，不是整個(gè)document．所有的腳本我們都是相對(duì)整個(gè)document，這樣會(huì)更好一些．

為了完成getPosition任務(wù)，必須循環(huán)取得item的父級(jí)，我們將加載內(nèi)容到item的左／上的位置．我們需要管理想要的top與left列表．

自從定義了mousemove這個(gè)函數(shù)，mouseMove就會(huì)一直運(yùn)行．第一我們確定item的 style.position為absolute，第二我們移動(dòng)item到前面定義好的位置．當(dāng)mouse點(diǎn)擊被釋放，dragObject被設(shè)置為 null，mouseMove將不在做任何事．

Dropping an Item

前面的例子目的很簡(jiǎn)單，就是拖拽item到我們希望到的地方．我們經(jīng)常還有其他目的如刪除item，比如我們可以將item拖到垃圾桶里，或者其他頁(yè)面定義的位置．

很不幸，我們有一個(gè)很大的難題，當(dāng)我們拖拽，item會(huì)在鼠標(biāo)之下，比如mouseove,mousedown,mouseup或者其他mouse action．如果我們拖拽一個(gè)item到垃圾桶上，鼠標(biāo)信息還在item上，不在垃圾桶上．

怎么解決這個(gè)問(wèn)題呢？有幾個(gè)方法可以來(lái)解決．第一，這是以前比較推薦的，我們?cè)谝苿?dòng)鼠標(biāo)時(shí)item會(huì)跟隨鼠標(biāo)，并占用了mouseover/mousemove等鼠標(biāo)事件，我們不這樣做，只是讓item跟隨著鼠標(biāo)，并不占用mouseover等鼠標(biāo)事件，這樣會(huì)解決問(wèn)題，但是這樣并不好看，我們還是希望item能直接跟在mouse下．

另一個(gè)選擇是不做item的拖拽．你可以改變鼠標(biāo)指針來(lái)顯示需要拖拽的item，然后放在鼠標(biāo)釋放的位置．這個(gè)解決方案，也是因?yàn)槊缹W(xué)原因不予接受．

最后的解決方案是，我們并不去除拖拽效果．這種方法比前兩種繁雜許多，我們需要定義我們需要釋放目標(biāo)的列表，當(dāng)鼠標(biāo)釋放時(shí)，手工去檢查釋放的位置是否是在目標(biāo)列表位置上，如果在，說(shuō)明是釋放在目標(biāo)位置上了．

Java代碼 收藏代碼

/*

All code from the previous example is needed with the exception

of the mouseUp function which is replaced below

*/

var dropTargets = [];

function addDropTarget(dropTarget){

dropTargets.push(dropTarget);

}

function mouseUp(ev){

ev = ev || window.event;

var mousePos = mouseCoords(ev);

for(var i=0; idropTargets.length; i++){

var curTarget = dropTargets[i];

var targPos = getPosition(curTarget);

var targWidth = parseInt(curTarget.offsetWidth);

var targHeight = parseInt(curTarget.offsetHeight);

if(

(mousePos.x targPos.x)

(mousePos.x (targPos.x + targWidth))

(mousePos.y targPos.y)

(mousePos.y (targPos.y + targHeight))){

// dragObject was dropped onto curTarget!

}

}

dragObject = null;

}

鼠標(biāo)釋放時(shí)會(huì)去取是否有drop屬性，如果存在，同時(shí)鼠標(biāo)指針還在drop的范圍內(nèi)，執(zhí)行drop操作．我們檢查鼠標(biāo)指針位置是否在目標(biāo)范圍是用(mousePos.xtargetPos.x)，而且還要符合條件(mousePos.x(targPos.x + targWidth))．如果所有的條件符合，說(shuō)明指針確實(shí)在范圍內(nèi)，可以執(zhí)行drop指令了．

Pulling It All Together

最后我們擁有了所有的drag/drop的腳本片斷！下一個(gè)事情是我們將創(chuàng)建一個(gè)DOM處理．

下面的代碼將創(chuàng)建container(容器),而且使任何一個(gè)需要drag/drop的item變成一個(gè)容器的item.代碼在這個(gè)文章第二個(gè)demo的后面，它可以用戶記錄一個(gè)list(列表)，定為一個(gè)導(dǎo)航窗口在左邊或者右邊，或者更多的函數(shù)你可以想到的．

下一步我們將通過(guò)"假代碼"讓reader看到真代碼，下面為推薦:

1、當(dāng)document第一次載入時(shí)，創(chuàng)建dragHelper DIV.dragHelper將給移動(dòng)的item加陰影．真實(shí)的item沒(méi)有被dragged，只是用了insertBefor和appendChild來(lái)移動(dòng)了，我們隱藏了dragHelper

2、有了mouseDown與mouseUp函數(shù)．所有的操作會(huì)對(duì)應(yīng)到當(dāng)?shù)絠MouseDown的狀態(tài)中，只有當(dāng)mouse左鍵為按下時(shí)iMouseDown才為真，否則為假．

3、我們創(chuàng)建了全局變量DragDrops與全局函數(shù)CreateDragContainer.DragDrops包含了一系列相對(duì)彼此的容器．任何參數(shù)(containers)將通過(guò)CreatedcragContainer進(jìn)行重組與序列化，這樣可以自由的移動(dòng)．CreateDragContainer函數(shù)也將item進(jìn)行綁定與設(shè)置屬性．

4、現(xiàn)在我們的代碼知道每個(gè)item的加入，當(dāng)我們移動(dòng)處mouseMove，mouseMove函數(shù)首先會(huì)設(shè)置變量target，鼠標(biāo)移動(dòng)在上面的item，如果這個(gè)item在容器中(checked with getAttribute):

* 運(yùn)行一小段代碼來(lái)改變目標(biāo)的樣式．創(chuàng)造rollover效果

* 檢查鼠標(biāo)是否沒(méi)有放開(kāi)，如果沒(méi)有

o 設(shè)置curTarget代表當(dāng)前item

o 記錄item的當(dāng)前位置，如果需要的話，我們可以將它返回

o 克隆當(dāng)前的item到dragHelper中，我們可以移動(dòng)帶陰影效果的item.

o item拷貝到dragHelper后，原有的item還在鼠標(biāo)指針下，我們必須刪除掉dragObj，這樣腳本起作用，dragObj被包含在一個(gè)容器中．

o 抓取容器中所有的item當(dāng)前坐標(biāo)，高度/寬度，這樣只需要記錄一次，當(dāng)item被drag時(shí)，每隨mouse移動(dòng)，每移鐘就會(huì)記錄成千上萬(wàn)次．

* 如果沒(méi)有，不需要做任何事，因?yàn)檫@不是一個(gè)需要移動(dòng)的item

5、檢查curTarget，它應(yīng)該包含一個(gè)被移動(dòng)的item,如果存在，進(jìn)行下面操作：

* 開(kāi)始移動(dòng)帶有陰影的item，這個(gè)item就是前文所創(chuàng)建的

* 檢查每個(gè)當(dāng)前容器中的container，是否鼠標(biāo)已經(jīng)移動(dòng)到這些范圍內(nèi)了

o 我們檢查看一下正在拖動(dòng)的item是屬于哪個(gè)container

o 放置item在一個(gè)container的某一個(gè)item之前，或者整個(gè)container之后

o 確認(rèn)item是可見(jiàn)的

* 如果鼠標(biāo)不在container中，確認(rèn)item是不可見(jiàn)了．

javascript 拖拽移動(dòng)滾動(dòng)條

script type="text/javascript"

var _y;

var scrolling=false;

document.onmousedown=function(e){

var e = window.event || e;

_y = e.clientY;

scrolling=true;

};

document.onmousemove = function(e){

if(!scrolling) return;

var e = window.event || e;

document.body.style.cursor="move";

var move=(e.clientY-_y)/10;

var scrollTop=document.body.scrollTop + document.documentElement.scrollTop;

window.scrollTo(0,scrollTop+move);

};

document.onmouseup=function(){

scrolling=false;

document.body.style.cursor="default";

};

/script

不足是會(huì)選中文字- -！

JavaScript的div拖拽，用構(gòu)造函數(shù)，在鼠標(biāo)移動(dòng)太快時(shí)會(huì)使onmousemove失效，怎么解決？

你的代碼沒(méi)用代碼排版太雜亂，我直接把自己寫(xiě)的拖拽給你參考一下，這段代碼只是無(wú)聊時(shí)寫(xiě)的，所以沒(méi)寫(xiě)吸附和區(qū)域限制，你可以參考修改一下。使用方法在底部。

function?ClickMove(id){

var?_this?=?this;

this.ele?=?document.querySelector(id);

this.left?=?this.ele.offsetLeft;

this.top?=?this.ele.offsetTop;

this.ele.onmousedown?=?function(ev){

_this.mDown(ev);

}

}

ClickMove.prototype.mDown?=?function(ev){

var?_this?=?this;

if(?getComputedStyle(this.ele).position?!=?'absolute'?)?this.ele.style.position?=?'relative';

var?eleX?=?ev.clientX?-?this.ele.offsetLeft;

var?eleY?=?ev.clientY?-?this.ele.offsetTop;

document.documentElement.onmousemove?=?function(ev){

_this.ele.style.left?=?ev.clientX?-?eleX?-?_this.left?+?'px';

_this.ele.style.top?=?ev.clientY?-?eleY?-?_this.top??+?'px';

}

document.documentElement.onmouseup?=?function(){

this.onmousemove?=?null;

}

}

/*

元素你只要給一個(gè)寬高背景就好，其他的不用給都可以。

使用方法：寫(xiě)ID或者class名字

class方式demo:?var?div1?=?new?ClickMove('.box1');

id方式demo:?var?div1?=?new?ClickMove('#box1');

*/

JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽庫(kù)實(shí)例

本文實(shí)例講述了JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽庫(kù)。分享給大家供大家參考。具體如下：

這是一個(gè)面向?qū)ο蟮腏S拖拽庫(kù)，可設(shè)置水平鎖定、垂直鎖定、鎖定位置、鎖定范圍等，設(shè)定這些范圍后，只能在設(shè)定的模式下拖動(dòng)，我覺(jué)得這是個(gè)挺不錯(cuò)的拖拽實(shí)例。

運(yùn)行效果截圖如下：

在線演示地址如下：

具體代碼如下：

!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

""

html

xmlns=""

head

meta

http-equiv="Content-Type"

content="text/html;

charset=utf-8"

/

title拖拽庫(kù)/title

style

type="text/css"

div,h2,p{margin:0;padding:0;}

body{font:14px/1.5

arial;}

#box{width:100px;height:100px;background:#fef4eb;padding:5px;margin:50px;border:1px

solid

#f60;}

#box

.title{height:25px;background:#f60;}

#tool{margin-bottom:10px;}

/style

script

type="text/javascript"

function

Drag()

{

//初始化

this.initialize.apply(this,

arguments)

}

Drag.prototype

=

{

//初始化

initialize

:

function

(drag,

options)

{

this.drag

=

this.$(drag);

this._x

=

this._y

=

0;

this._moveDrag

=

this.bind(this,

this.moveDrag);

this._stopDrag

=

this.bind(this,

this.stopDrag);

this.setOptions(options);

this.handle

=

this.$(this.options.handle);

this.maxContainer

=

this.$(this.options.maxContainer);

this.maxTop

=

Math.max(this.maxContainer.clientHeight,

this.maxContainer.scrollHeight)

-

this.drag.offsetHeight;

this.maxLeft

=

Math.max(this.maxContainer.clientWidth,

this.maxContainer.scrollWidth)

-

this.drag.offsetWidth;

this.limit

=

this.options.limit;

this.lockX

=

this.options.lockX;

this.lockY

=

this.options.lockY;

this.lock

=

this.options.lock;

this.onStart

=

this.options.onStart;

this.onMove

=

this.options.onMove;

this.onStop

=

this.options.onStop;

this.handle.style.cursor

=

"move";

this.changeLayout();

this.addHandler(this.handle,

"mousedown",

this.bind(this,

this.startDrag))

},

changeLayout

:

function

()

{

this.drag.style.top

=

this.drag.offsetTop

+

"px";

this.drag.style.left

=

this.drag.offsetLeft

+

"px";

this.drag.style.position

=

"absolute";

this.drag.style.margin

=

"0"

},

startDrag

:

function

(event)

{

var

event

=

event

||

window.event;

this._x

=

event.clientX

-

this.drag.offsetLeft;

this._y

=

event.clientY

-

this.drag.offsetTop;

this.addHandler(document,

"mousemove",

this._moveDrag);

this.addHandler(document,

"mouseup",

this._stopDrag);

event.preventDefault

event.preventDefault();

this.handle.setCapture

this.handle.setCapture();

this.onStart()

},

moveDrag

:

function

(event)

{

var

event

=

event

||

window.event;

var

iTop

=

event.clientY

-

this._y;

var

iLeft

=

event.clientX

-

this._x;

if

(this.lock)

return;

this.limit

(iTop

(iTop

=

0),

iLeft

(iLeft

=

0),

iTop

this.maxTop

(iTop

=

this.maxTop),

iLeft

this.maxLeft

(iLeft

=

this.maxLeft));

this.lockY

||

(this.drag.style.top

=

iTop

+

"px");

this.lockX

||

(this.drag.style.left

=

iLeft

+

"px");

event.preventDefault

event.preventDefault();

this.onMove()

},

stopDrag

:

function

()

{

this.removeHandler(document,

"mousemove",

this._moveDrag);

this.removeHandler(document,

"mouseup",

this._stopDrag);

this.handle.releaseCapture

this.handle.releaseCapture();

this.onStop()

},

//參數(shù)設(shè)置

setOptions

:

function

(options)

{

this.options

=

{

handle:

this.drag,

//事件對(duì)象

limit:

true,

//鎖定范圍

lock:

false,

//鎖定位置

lockX:

false,

//鎖定水平位置

lockY:

false,

//鎖定垂直位置

maxContainer:

document.documentElement

||

document.body,

//指定限制容器

onStart:

function

()

{},

//開(kāi)始時(shí)回調(diào)函數(shù)

onMove:

function

()

{},

//拖拽時(shí)回調(diào)函數(shù)

onStop:

function

()

{}

//停止時(shí)回調(diào)函數(shù)

};

for

(var

p

in

options)

this.options[p]

=

options[p]

},

//獲取id

$

:

function

(id)

{

return

typeof

id

===

"string"

?

document.getElementById(id)

:

id

},

//添加綁定事件

addHandler

:

function

(oElement,

sEventType,

fnHandler)

{

return

oElement.addEventListener

?

oElement.addEventListener(sEventType,

fnHandler,

false)

:

oElement.attachEvent("on"

+

sEventType,

fnHandler)

},

//刪除綁定事件

removeHandler

:

function

(oElement,

sEventType,

fnHandler)

{

return

oElement.removeEventListener

?

oElement.removeEventListener(sEventType,

fnHandler,

false)

:

oElement.detachEvent("on"

+

sEventType,

fnHandler)

},

//綁定事件到對(duì)象

bind

:

function

(object,

fnHandler)

{

return

function

()

{

return

fnHandler.apply(object,

arguments)

}

}

};

//應(yīng)用

window.onload

=

function

()

{

var

oBox

=

document.getElementById("box");

var

oTitle

=

oBox.getElementsByTagName("h2")[0];

var

oSpan

=

document.getElementsByTagName("span")[0];

var

oDrag

=

new

Drag(oBox,

{handle:oTitle,

limit:false});

var

aInput

=

document.getElementsByTagName("input");

//鎖定范圍接口

aInput[0].onclick

=

function

()

{

oDrag.limit

=

!oDrag.limit;

this.value

=

oDrag.limit

?

"取消鎖定范圍"

:

"鎖定范圍"

};

//水平鎖定接口

aInput[1].onclick

=

function

()

{

oDrag.lockX

=

!oDrag.lockX;

this.value

=

oDrag.lockX

?

"取消水平鎖定"

:

"水平鎖定"

};

//垂直鎖定接口

aInput[2].onclick

=

function

()

{

oDrag.lockY

=

!oDrag.lockY;

this.value

=

oDrag.lockY

?

"取消垂直鎖定"

:

"垂直鎖定"

};

//鎖定位置接口

aInput[3].onclick

=

function

()

{

oDrag.lock

=

!oDrag.lock;

this.value

=

oDrag.lock

?

"取消鎖定位置"

:

"鎖定位置"

};

//開(kāi)始拖拽時(shí)方法

oDrag.onStart

=

function

()

{

oSpan.innerHTML

=

"開(kāi)始拖拽"

};

//開(kāi)始拖拽時(shí)方法

oDrag.onMove

=

function

()

{

oSpan.innerHTML

=

"left:"

+

this.drag.offsetLeft

+

",

top:"

+

this.drag.offsetTop

};

//開(kāi)始拖拽時(shí)方法

oDrag.onStop

=

function

()

{

oSpan.innerHTML

=

"結(jié)束拖拽"

};

};

/script

/head

body

div

id="tool"

input

type="button"

value="鎖定范圍"

/

input

type="button"

value="水平鎖定"

/

input

type="button"

value="垂直鎖定"

/

input

type="button"

value="鎖定位置"

/

/div

p拖放狀態(tài)：span未開(kāi)始/span/p

div

id="box"

h2

class="title"/h2

/div

/body

/html

希望本文所述對(duì)大家的JavaScript程序設(shè)計(jì)有所幫助。

網(wǎng)站題目：javascript拖拽,css實(shí)現(xiàn)拖拽
本文來(lái)源：http://jinyejixie.com/article30/dsdgiso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、小程序開(kāi)發(fā)、網(wǎng)站改版、定制網(wǎng)站

廣告

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