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>

Javascript高级可拖动麻烦

1 个答案: