Javascript HTML5排序DIV

我对HTML5拖放API有点问题。 让我们编写代码，让每个人都能理解

<div id="draggerContainer" droppable="true">
  <div class="draggableItem" draggable="true" data-id="001">[... Stuff inside like <img> and other <div> ...] </div>
  <div class="draggableItem" draggable="true" data-id="002">[... Stuff inside like <img> and other <div> ...] </div>
  <div class="draggableItem" draggable="true" data-id="003">[... Stuff inside like <img> and other <div> ...] </div>
  <div class="draggableItem" draggable="true" data-id="004">[... Stuff inside like <img> and other <div> ...] </div>
  <div class="draggableItem" draggable="true" data-id="005">[... Stuff inside like <img> and other <div> ...] </div>
  <div class="draggableItem" draggable="true" data-id="006">[... Stuff inside like <img> and other <div> ...] </div>
</div>

我在上的教程中使用了Javascript脚本。

请查看

这是一个非常简单的库

首先，开始拖动时，将

数据id

属性作为拖动信息发送，以便您知道正在拖动哪个元素：

function handleDragStart(e) {
  // Target (this) element is the source node.
  this.style.opacity = '0.4';
  dragSrcEl = this;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}
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;
}
function handleDragEnter(e) {
  // this / e.target is the current hover target.
  this.classList.add('over');
}
function handleDragLeave(e) {
  this.classList.remove('over');  // this / e.target is previous target element.
}
function handleDrop(e) {
  // this / e.target is current target element.
  if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
  }
  // See the section on the DataTransfer object.
  return false;
}
function handleDragEnd(e) {
  // this/e.target is the source node.
  [].forEach.call(cols, function (col) {
    col.classList.remove('over');
  });
}
var cols = document.querySelectorAll('#draggerContainer .draggableItem');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false)
  col.addEventListener('dragover', handleDragOver, false);
  col.addEventListener('dragleave', handleDragLeave, false);
  col.addEventListener('drop', handleDrop, false);
  col.addEventListener('dragend', handleDragEnd, false);
});

您必须在

dragover

上使用

preventDefault（）

，才能使拖动工作：

$("#draggerContainer")
    .on("dragstart", ".draggableItem", function(e) {
        e.dataTransfer.setData("id", $(this).data("id"));
    })

在

拖放时，必须交换元素：

.on("dragover", ".draggableItem", function(e) {
    e.preventDefault();
})

您的JS/JQuery源代码在哪里？你不能只是发布静态HTML，然后问为什么JS被破坏了。任何控制台输出，等等？如果你想要一个没有成功就无法执行的教程，那么这就是Js源代码。我认为这不是正确的地方。你必须把代码，使你的生活成为一场噩梦或什么。那么，如果你做了那个教程，你认为错在哪里？你哪里会出错？这些可能是合理的问题（还有，提供一些代码），我不想要教程。。我已经用过了（HTML5）。我想知道是否有人能帮我。谢谢，我会尽快尝试。我想补充一点，你也可以在jQuery事件对象上进行数据传输，比如：
e.originalEvent.dataTransfer
它不太直接，但不需要事件道具的推送。jQuery UI Sortable适用于简单的UL。但是，当您需要拖放div或其他元素时，它不会像预期的那样工作。
.on("drop", ".draggableItem", function(e) {
    // get the element being dragged according to drag information
    var id = e.dataTransfer.getData("id");

    var $draggingElem = $(".draggableItem").filter(function() {
        return $(this).data("id") === id;
    });


    // This is to make sure the element appears under the cursor
    var indexDrag = $draggingElem.index();
    var indexThis = $(this).index();

    if(indexDrag < indexThis) {
        $draggingElem.insertAfter(this);
    } else if(indexDrag > indexThis) {
        $draggingElem.insertBefore(this);
    }
});

$.event.props.push("dataTransfer");