如何使用HTML5通過拖放來移動元素？

Question

我正在使用HTML Rocks中的拖放教程 。 當前教程基本上對拖動的元素和放置在其上的元素進行切換。 A點的內容轉到B點，B點的內容轉到A點。

|A|B|C|  -->  |B|A|C|
|D|E|F|       |D|E|F|

我正在嘗試更改此邏輯。 如果拖動點E，則它應該在其他點之間。

|A|B|C|  -->  |A|E|B|
|D|E|F|       |C|D|F|

這是我的演示 。

是否應該通過更改屬性dropEffect來完成此操作，還是必須創建一個新的div來添加要移動的項目？

function handleDragStart(e) {
  this.style.opacity = '0.4';  // this / e.target is the source node.
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

Answer 1

我感謝@tbirell找到了實現此目標的方法

我為此使用了Jquery UI 庫 ，並更改了我一開始所做的所有邏輯

我沒有使用DIV，而是用UL和LI代替了它們

<ul id="sortable">
  <li class=" ui-state-default">Item 1</li>
  <li class=" ui-state-default">Item 2</li>
  <li class=" ui-state-default">Item 3</li>
  <li class=" ui-state-default">Item 4</li>
  <li class=" ui-state-default">Item 5</li>
  <li class=" ui-state-default">Item 6</li>
</ul>

該庫是管理此邏輯的庫。

$( function() {
    $( "#sortable" ).sortable({
      revert: true
    });
    $( "#draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
  } );

工作演示的鏈接。