Javascript高级拖拽故障

Question

出于演示目的，我正在制作一个播放列表。我已经设置了一个嵌套在列表项中的无序列表。这些项目已经被"draggable=true“处理程序设置为可拖动的，它工作得很好。

这就是我被卡住的地方；

单击项目并准备好拖动后。我需要用户有一个强烈的视觉反馈的地方，用户是下降的项目。标准化没有给出任何视觉反馈，只是简单地将列表项放在其他项之间。我正在寻找一种方法，或者在视觉上将其他列表元素推到一边，或者至少在用户持有拖动项的位置上突出显示边框。

做这件事最好的方法是什么？我在这里放了一些代码以防万一，但我正在寻找的是我编写的代码之外的代码。

HTML：

<ul>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)" ondragenter="dragEnter(event)"> 
        Item 1
    </li>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)" ondragenter="dragEnter(event)"> 
        Item 2
    </li>
    <li draggable="true" ondragstart="dragStarted(event)" ondragover="draggingOver(event)" ondrop="dropped(event)" ondragenter="dragEnter(event)"> 
        Item 3
    </li>       
</ul>

JS

var source; 

function dragStarted(e){
    source = e.target;
    e.dataTransfer.setData("text/plain", e.target.innerHTML);
    e.dataTransfer.effectAllowed = "move";

}

function draggingOver(e){
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";

}

function dropped(e){
    e.preventDefault();
    e.stopPropagation();
    if (e.target.localName === 'li') {
        source.innerHTML = e.target.innerHTML;
        e.target.innerHTML = e.dataTransfer.getData("text/plain");
    }
}

如何添加代码，以便在项目之间以突出显示的边框的形式设计视觉反馈。

Answer 1

检查这两个示例。

首先，当某些东西被拖过时，只突出显示悬停项的边框。它使用dragenter和dragleave事件来添加和删除over css类。

​

var source; 

var items = document.querySelectorAll('li');
for (item of items) {
  item.addEventListener('dragstart', dragStarted, false);
  item.addEventListener('drop', dropped, false);
  item.addEventListener('dragover', draggingOver, false);
  item.addEventListener('dragenter', dragEnter, false);
  item.addEventListener('dragleave', dragLeave, false);
}
document.getElementById("list").addEventListener('mouseleave', dropped, false);

function dragEnter(e){
  this.classList.add('over');
}

function dragLeave(e){
  this.classList.remove('over');
}

function dragStarted(e){
  source = e.target;
  e.dataTransfer.setData("text/plain", e.target.innerHTML);
  e.dataTransfer.effectAllowed = "move";
  this.classList.add("over");
  this.style.opacity = '0.4';
}

function draggingOver(e){
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
}

function dropped(e){
  e.preventDefault();
  e.stopPropagation();
  source.style.opacity = '1.0';
  if (e.target.localName === 'li') {
    source.innerHTML = e.target.innerHTML;
    e.target.innerHTML = e.dataTransfer.getData("text/plain");
  }
  this.classList.remove("over");
  source.classList.remove("over");
}

ul { list-style-type: none; }

li {
  border: 1px solid #000;
  border-radius: 3px;
  text-decoration: none;
  padding: 2px 2px 2px 10px;
  margin: 1px;
  width: 300px;
  transition: 0.2s ease-in-out;
}

li.over {
  border: 1px dashed orange;
}

<ul id="list">
  <li draggable="true">Sun Shining On The Moon</li>
  <li draggable="true">Airglow</li>
  <li draggable="true">Diffuse reflection</li>
  <li draggable="true">Starlight</li>
</ul>

​

第二个例子，我认为，更接近你的需要。它使用JavaScript insertBefore方法替换dragenter事件中的项。

​

var source; 

var items = document.querySelectorAll('li');
for (item of items) {
  item.addEventListener('dragstart', dragStarted, false);
  item.addEventListener('drop', dropped, false);
  item.addEventListener('dragover', draggingOver, false);
  item.addEventListener('dragenter', dragEnter, false);
}
document.getElementById("list").addEventListener('mouseleave', dropped, false);

function isBefore(a, b) {
    if (a.parentNode == b.parentNode) {
        for (var cur = a; cur; cur = cur.previousSibling) {
            if (cur === b) { 
                return true;
            }
        }
    }
    return false;
} 

function dragEnter(e) {
    if (isBefore(source, e.target)) {
        e.target.parentNode.insertBefore(source, e.target);
    }
    else {
        e.target.parentNode.insertBefore(source, e.target.nextSibling);
    }
}

function dragStarted(e){
  e.dataTransfer.setData("text/plain", e.target.innerHTML);
  e.dataTransfer.effectAllowed = "move";
  this.classList.add("over");
  this.style.opacity = '0.4';
  source = this;
}

function draggingOver(e){
  e.preventDefault();
  e.dataTransfer.dropEffect = "move";
}

function dropped(e){
  source.style.opacity = '1.0';
  source.classList.remove("over");
}

ul { list-style-type: none; }

li {
  border: 1px solid #000;
  border-radius: 3px;
  text-decoration: none;
  padding: 2px 2px 2px 10px;
  margin: 1px;
  width: 300px;
  transition: 0.2s ease-in-out;
}

li.over {
  border: 1px dashed orange;
  transform: scale(0.97);
}

<ul id="list">
  <li draggable="true">Sun Shining On The Moon</li>
  <li draggable="true">Airglow</li>
  <li draggable="true">Diffuse reflection</li>
  <li draggable="true">Starlight</li>
</ul>

​