Javascript HTML5可拖动列表-多个setData？

因此，我有一个乐队的名单，我想组织成一个运行顺序，如：

<li data-band-id='1' draggable='true' class='band-name'>Metallica</li>
<li data-band-id='2' draggable='true' class='band-name'>Slayer</li>
<li data-band-id='3' draggable='true' class='band-name'>Paradise Lost</li>
<li data-band-id='4' draggable='true' class='band-name'>Gojira</li>

这非常有效，我可以拖放列表，使它们适当地更改位置和乐队交换的名称。但是，“数据带id”属性的值保持原样。我知道这正是我的代码所做的，这是我的问题。我想修改代码，以便将要拖放的频带的名称和“数据频带id”属性的值进行交换

---

我在谷歌上搜索了很多，但没有找到任何东西可以告诉我如何在多个值上设置数据，非常感谢您的帮助。

您可以查询这两个项的

属性
属性，并访问
数据带id的值。一旦有了这两个值，就可以调用
setAttribute（“name”，“value”）
来更新
数据带id
。您更新的
handleDrop
方法将是：

function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
  }
  if (dragSatMS != this) {
    dragSatMS.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text');
    //Get the data-band-id of both items.
    itemToReplaceAttr = this.attributes["data-band-id"].value;
    draggedItemAttr = dragSatMS.attributes["data-band-id"].value;
    //Call "setAttribute" to update the attributes.
    this.setAttribute("data-band-id", draggedItemAttr);
    dragSatMS.setAttribute("data-band-id", itemToReplaceAttr);
  }
  return false;
}

这里有一个很好的示例：Yass的答案是解决问题的一种方法

但我现在将向您介绍另一种方法，我在拖放方面看到的所有教程都会小心避免这种方法——我相信拖放API的使用提供了一种理想的场景，在这种场景中，事件委派应该会大放异彩——然而，到目前为止（据我所知），没有流行的教程探讨过这种方法

如果您急于看到我的建议起作用，请参阅

因此，您可以将拖动事件的处理委托给项目的父级，
ul
。而不是将拖动元素的
innerHtml
与上的元素的
innerHtml进行交换，而是交换
outerHtml

var draggedItem = null;
var ul = document.getElementById('ms-saturday');

// delegate event handling to the parent of the list items
ul.addEventListener('dragstart', buffer(handleDragStart), false);
ul.addEventListener('dragover', buffer(handleDragOver), false);
ul.addEventListener('drop', buffer(handleDrop), false);

function handleDragStart(e) {
  draggedItem = e.target;
  e.dataTransfer.effectAllowed = 'move';

  // dataTransfer is not really required, but I think IE may need it.
  // Also, not that if you must use dataTransfer API,
  // IE strongly requires that the mime type must be 'text'.
  e.dataTransfer.setData('text', this.innerHTML);
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }

  e.dataTransfer.dropEffect = 'move';

  return false;
}

function handleDrop(e) {
  var tmp;

  if (e.stopPropagation) {
    e.stopPropagation();
  }

  if (draggedItem !== e.target) {
    // swapp outerHtml here
    tmp = draggedItem.outerHTML;
    draggedItem.outerHTML = e.target.outerHTML;
    e.target.outerHTML = tmp;;
  }

  return false;
}

// this is used to create the handlers so that there won't be
// a need to repeat 'if (e.target === ul) {...' for as many times
// as there are handlers needed.
function buffer(fn) {

  return function(e) {

    // ignore drag-and-drop on the parent element itself
    if (e.target === ul) {
      return;
    }

    fn.call(this, e);
  };
}

我让你们根据自己的喜好改进这个方法。
下面的提琴进一步支持了这个答案：非常感谢你们：）谢谢你们的帮助，我非常感谢。
var draggedItem = null;
var ul = document.getElementById('ms-saturday');

// delegate event handling to the parent of the list items
ul.addEventListener('dragstart', buffer(handleDragStart), false);
ul.addEventListener('dragover', buffer(handleDragOver), false);
ul.addEventListener('drop', buffer(handleDrop), false);

function handleDragStart(e) {
  draggedItem = e.target;
  e.dataTransfer.effectAllowed = 'move';

  // dataTransfer is not really required, but I think IE may need it.
  // Also, not that if you must use dataTransfer API,
  // IE strongly requires that the mime type must be 'text'.
  e.dataTransfer.setData('text', this.innerHTML);
}

function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault();
  }

  e.dataTransfer.dropEffect = 'move';

  return false;
}

function handleDrop(e) {
  var tmp;

  if (e.stopPropagation) {
    e.stopPropagation();
  }

  if (draggedItem !== e.target) {
    // swapp outerHtml here
    tmp = draggedItem.outerHTML;
    draggedItem.outerHTML = e.target.outerHTML;
    e.target.outerHTML = tmp;;
  }

  return false;
}

// this is used to create the handlers so that there won't be
// a need to repeat 'if (e.target === ul) {...' for as many times
// as there are handlers needed.
function buffer(fn) {

  return function(e) {

    // ignore drag-and-drop on the parent element itself
    if (e.target === ul) {
      return;
    }

    fn.call(this, e);
  };
}