1、為要被拖移三個事件,onmousedown,onmousemove,onmouseup
2、在onmousemove事件中來處理被拖移元素的位置的變化，其實說白了元素要移動的距離就是鼠標兩次移動之間的距離。
3、其中還包括setCapture,releaseCapture，目的就是為了被搬移的元素始終能擁有焦點。
以前大致就是以前的認識，可以參見 JS拖動技術(shù)--- 關(guān)于setCapture 這個實現(xiàn)，后來隨著工作要求的提高，做的工作都是要跨瀏覽器的，所以就重新構(gòu)思并參考一些開源代碼做了實現(xiàn)。
現(xiàn)在大致思路可分析為以下幾步，我一一為您展現(xiàn)。
1、 我們是為了拖移而搬移嗎？當然不是，如google地圖，當每次搬移后他的目的是為了計算當前空間坐標來加載地理信息。所以我這里設計了幾個常見事件。以下是事件列表
onDragStart ：元素發(fā)生拖移時，如果注冊該事件，觸發(fā)時會接收到兩個參數(shù)x,y分別為被搬移元素發(fā)生拖移時的坐標
onDrag ： 元素拖移過程中，如果注冊該事件，觸發(fā)時會接收到兩個參數(shù)nx,ny拖移過程中坐標發(fā)生的偏移量
onDragEnd ：元素發(fā)生結(jié)束時，如果注冊該事件，觸發(fā)時會接收到兩個參數(shù)x,y分別為被搬移元素的當前坐標
2、 onmousedown事件應該綁定給誰?以前我都是綁定給被拖移元素的，后來發(fā)現(xiàn)很不靈活，現(xiàn)在設計為可綁定給任意不相關(guān)的元素同時實現(xiàn)該元素的拖動。
3、 如何來實現(xiàn)元素搬移過程中一直擁有焦點？因為要跨瀏覽器，所以就不再用setCapture之類的方法，這里換種思維，為什么元素元素搬移過程中沒有了焦點呢，主要是我們把onmousemove事件注冊到了被拖移的元素上，而這并不是必需的，所以當元素觸發(fā)onmousedown事件后，我把onmousemove、onmouseup事件直接注冊到document上，這樣鼠標移到哪都會有焦點。
說完了這么多，直接看代碼結(jié)構(gòu)吧！
代碼如下:
Drag = {
obj: null,
init: function (options) {
options.handler.onmousedown = this.start;
options.handler.root = options.root || options.handler;
var root = options.handler.root;
root.onDragStart = options.dragStart || new Function();
root.onDrag = options.onDrag || new Function();
root.onDragEnd = options.onDragEnd || new Function();
},
start: function (e) {//此時的this是handler
var obj = Drag.obj = this;
obj.style.cursor = 'move';
e = e || Drag.fixEvent(window.event);
ex = e.pageX;
ey = e.pageY;
obj.lastMouseX = ex;
obj.lastMouseY = ey;
var x = obj.root.offsetLeft;
var y = obj.root..offsetTop;
obj.root.style.left = x + "px";
obj.root.style.top = y + "px";
document.onmouseup = Drag.end;
document.onmousemove = Drag.drag;
obj.root.onDragStart(x, y);
},
drag: function (e) {
e = e || Drag.fixEvent(window.event);
ex = e.pageX;
ey = e.pageY;
var root = Drag.obj.root;
var x = root.style.left ? parseInt(root.style.left) : 0;
var y = root.style.top ? parseInt(root.style.top) : 0;
var nx = ex - Drag.obj.lastMouseX + x;
var ny = ey - Drag.obj.lastMouseY + y;
root.style.left = nx + "px";
root.style.top = ny + "px";
Drag.obj.root.onDrag(nx, ny);
Drag.obj.lastMouseX = ex;
Drag.obj.lastMouseY = ey;
},
end: function (e) {
var x = Drag.obj.root.style.left ? parseInt(Drag.obj.root.style.left) : 0;
var y = Drag.obj.root.style.top ? parseInt(Drag.obj.root.style.top) : 0;
Drag.obj.root.onDragEnd(x, y);
document.onmousemove = null;
document.onmouseup = null;
Drag.obj = null;
},
fixEvent: function (e) {
e.pageX = e.clientX + document.documentElement.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
return e;
}
}
上面init主要處理一些初如化工作，如記錄onDragStart、onDrag、onDragEnd三個事件, handler為處理拖動事件的那個元素，root為被拖動的元素。
當在handler上點擊后觸發(fā)Drag.start方法，Drag.start主要為記錄住鼠標相對整個頁面的位置;給document注冊onmouseup、onmousemove事件，及觸發(fā)onDragStart事件。
Drag.drag方法也很簡單，主要作用就是更新被搬移元素位置，同時記錄住鼠標相對整個頁面的位置。
Drag.end方法就更簡單了，就是做一些收尾工作。
最后給大家附段使用的代碼吧,祝大家學習愉快！
代碼如下:
Drag.init({
handler: document.getElementById("handler"),
root:document.getElementById("root");
});
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
