拖動元素時，如何獲取要替換的元素的位置？

有人告訴我，去完成一個UI效果應該是什麼樣子的：拖動元素時，如何獲取要替換的元素的位置？

第一：

兩三列在頁面上，很多ELEM（例如：DIV）在每個列中，
並且列中的所有這些元素應該可拖動，並且
與此同時該列應自動對所有元素進行排序。

第二：

，拖動元件應我的光標點移動到該柱，
並且當液滴此ELEM，應該有這樣一種效果，即在被放棄的元素周圍的元素之一將會將'位置'動畫到原始拖動元素的位置。

enableDrag功能，我發現是這樣的：

function enableDragging(ele) { 

    var dragging = dragging || false, 
     x, y, Ox, Oy, 
     current; 
     enableDragging.z = enableDragging.z || 1; 
    ele.onmousedown = function(ev) { 
     current = ev.target; 
     current.style.position = "absolute"; 
     dragging = true; 
     x = ev.clientX; 
     y = ev.clientY; 
     Ox = current.offsetLeft; 
     Oy = current.offsetTop; 
     current.style.zIndex = ++enableDragging.z; 
     console.log(dragging); 

     window.onmousemove = function(ev) { 
      if (dragging == true) { 
       var Sx = ev.clientX - x + Ox, 
        Sy = ev.clientY - y + Oy; 
       current.style.top = Sy + "px"; 
       current.style.left = Sx + "px"; 
       return false; 
      } 
     }; 
     window.onmouseup = function(ev) { 
      dragging && (dragging = false); 
     } 
    }; 
}

，但我應該怎麼動了，其實我也沒想到得到ELEM的位置會是怎樣取代了原始拖ELEM是...

主要是，我想所有這個效果寫在原始的Javascript，但jQuery是好的！

我是JS新手，這是我應該弄清楚的最重要的項目！

任何人都可以幫助我嗎？

來源

2012-07-16 Lien

您是否嘗試過jQuery UI「可排序」小部件？這聽起來像是你所需要的大部分。

特別參見「connected list」演示。

來源

2012-07-16 10:46:45 Alnitak

好的，我已檢查過，這很好。但我怎麼能讓一個elem可拖動和排序在原始的JavaScript？我已經搜索這個谷歌，結果幾乎不符合我的目的。 – Lien 2012-07-17 03:10:11

@strangeline它是_hard_做您在純Javascript中所要求的 - 這就是爲什麼有完整的jQuery UI模塊致力於實現它。 – Alnitak 2012-07-17 06:56:38

拖動元素時，如何獲取要替換的元素的位置？

回答

相關問題