2

だから、次のように、実行順に整理したいバンドのリストがあります。

<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>

これらのリスト項目をドラッグして、リスト全体の各バンドの配置を変更できるようにしたいと考えています。これまでのところ、これを行うには次の JavaScript があります。

var dragSatMS = null;
function handleDragStart(e) {
    //this.style.color = 'green'; 
    dragSatMS = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text', this.innerHTML);
}
function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); 
    }
    e.dataTransfer.dropEffect = 'move';
    return false;
}
function handleDragEnter(e) {
    this.classList.add('over');
}
function handleDragLeave(e) {
  this.classList.remove('over');
  //this.style.color = '#333';
}
function handleDrop(e) {
  if (e.stopPropagation) {
    e.stopPropagation();
  }
  if (dragSatMS != this) {
    dragSatMS.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text');
  }
  return false;
}
function handleDragEnd(e) {
  [].forEach.call(mssatCols, function (mSatCol) {
    mSatCol.classList.remove('over');
     //mSatCol.style.color = '#333';
  });
}
var mssatCols = document.querySelectorAll('#ms-saturday .band-name');
[].forEach.call(mssatCols, function(msSatCol) {
  msSatCol.addEventListener('dragstart', handleDragStart, false);
  msSatCol.addEventListener('dragenter', handleDragEnter, false);
  msSatCol.addEventListener('dragover', handleDragOver, false);
  msSatCol.addEventListener('dragleave', handleDragLeave, false);
  msSatCol.addEventListener('drop', handleDrop, false);
  msSatCol.addEventListener('dragend', handleDragEnd, false);
});

これは完全に機能します。リストをドラッグ アンド ドロップして場所を変更し、バンドの名前を適切に入れ替えることができます。ただし、「data-band-id」属性の値はそのままです。これはまさに私が持っているコードが行うことであり、それが私の問題であることを知っています。ドラッグ アンド ドロップされるバンドの名前と'data-band-id' 属性の値の両方が交換されるように、コードを修正したいと思います。

私は多くのことをグーグルで検索しましたが、複数の値に setData を設定する方法を示すことができるものは何も見つかりませんでした。

4

2 に答える 2

1

attributes両方のアイテムのプロパティをクエリして、 の値にアクセスできますdata-band-id。2 つの値の両方を取得したら、 を呼び出しsetAttribute("name", "value")て を更新できますdata-band-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;
}

これが適切なデモです: Fiddle

于 2016-02-27T22:37:52.440 に答える