拖放列表项

Question

我指的是实现拖放系统的示例。我指的例子如下。

https://codepen.io/retrofuturistic/pen/tlbHE

我已经在我的项目中成功使用了给定的示例。唯一的问题是在这个例子中我不能将一个元素移动到最后一个位置。我如何修改此解决方案以能够将最后一个元素上方的任何项目移动到最后一个位置。

HTML

<ul id="columns">
  <li class="column" draggable="true"><header>A</header></li>
  <li class="column" draggable="true"><header>B</header></li>
  <li class="column" draggable="true"><header>C</header></li>
  <li class="column" draggable="true"><header>D</header></li>
  <li class="column" draggable="true"><header>E</header></li>
</ul>

CSS

[draggable] {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  /* Required to make elements draggable in old WebKit */
  -khtml-user-drag: element;
  -webkit-user-drag: element;
}

#columns {
  list-style-type: none;
}

.column {
  width: 162px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: center;
  cursor: move;
}
.column header {
  height: 20px;
  width: 150px;
  color: black;
  background-color: #ccc;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  border-radius: 10px;
  border: 2px solid #666666;
}

.column.dragElem {
  opacity: 0.4;
}
.column.over {
  //border: 2px dashed #000;
  border-top: 2px solid blue;
}

JS

var dragSrcEl = null;

function handleDragStart(e) {
  // Target (this) element is the source node.
  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.outerHTML);

  this.classList.add('dragElem');
}
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
  this.classList.add('over');

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
}

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 some browsers from redirecting.
  }

  // Don't do anything if dropping the same column we're dragging.
  if (dragSrcEl != this) {
    // Set the source column's HTML to the HTML of the column we dropped on.
    //alert(this.outerHTML);
    //dragSrcEl.innerHTML = this.innerHTML;
    //this.innerHTML = e.dataTransfer.getData('text/html');
    this.parentNode.removeChild(dragSrcEl);
    var dropHTML = e.dataTransfer.getData('text/html');
    this.insertAdjacentHTML('beforebegin',dropHTML);
    var dropElem = this.previousSibling;
    addDnDHandlers(dropElem);
    
  }
  this.classList.remove('over');
  return false;
}

function handleDragEnd(e) {
  // this/e.target is the source node.
  this.classList.remove('over');

  /*[].forEach.call(cols, function (col) {
    col.classList.remove('over');
  });*/
}

function addDnDHandlers(elem) {
  elem.addEventListener('dragstart', handleDragStart, false);
  elem.addEventListener('dragenter', handleDragEnter, false)
  elem.addEventListener('dragover', handleDragOver, false);
  elem.addEventListener('dragleave', handleDragLeave, false);
  elem.addEventListener('drop', handleDrop, false);
  elem.addEventListener('dragend', handleDragEnd, false);

}

var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, addDnDHandlers);

Answer 1

链接的示例简单地假设您希望将列表项拖动到目标 (insertAdjacentHTML('beforebegin',…))之前。您要做的是在任一侧拖动一个元素。

一种方法是计算鼠标相对于目标项目的位置，然后决定您是更接近项目的开头还是结尾。我在https://codepen.io/manngo/pen/eYdExOr

发布了修改版

简而言之，这就是所涉及的内容。

首先，您将需要 两个 类来表示您是否超过目标：

.column.over-before {
    border-top: 2px solid red;
}
.column.over-after {
    border-bottom: 2px solid green;
}

我使用不同的颜色只是为了便于追踪。

在 JavaScript 中，您将需要检查您是在目标的前半部分还是后半部分。由于e.clientY 给出了鼠标的y 坐标，getBoundingClientRect() 给出了目标的顶部和底部，您可以检查y 坐标是否小于顶部和底部的平均值：

function handleDragOver(e) {
    // …
    var top=this.getBoundingClientRect().top;
    var bottom=this.getBoundingClientRect().bottom;
    if(e.clientY<(top+bottom)/2) {
        this.classList.add('over-before');
        this.classList.remove('over-after');
    }
    else {
        this.classList.add('over-right');
        this.classList.remove('over-after');
    }
}

任何对删除类名的引用现在都必须删除两个类名：

function handleDragLeave(e) {
    this.classList.remove('dragover-before');
    this.classList.remove('dragover-after');
}
function handleDragEnd(e) {
    this.classList.remove('over-before');
    this.classList.remove('over-after');
}

当你放下物品时，你需要测试你是在前半部分还是后半部分放下它，意思是在物品之前还是之后。为此，您可以使用类名：

function handleDrop(e) {
    e.stopPropagation();
    if (dragSrcEl != this) {
        this.parentNode.removeChild(dragSrcEl);
        var dropHTML = e.dataTransfer.getData('text/html');

        if(this.classList.contains('over-before')) {
            this.insertAdjacentHTML('beforebegin',e.dataTransfer.getData('text/html'));
            addDnDHandlers(this.previousElementSibling);
        }
        else if(this.classList.contains('over-after')) {
            this.insertAdjacentHTML('afterend',e.dataTransfer.getData('text/html'));
            addDnDHandlers(this.nextElementSibling);
        }
    }
    this.classList.remove('over-before');
    this.classList.remove('over-after');
}

当然，您可以简化代码，并将其包装在实用函数中。

我有一个正在逐步清理的小提琴：https://jsfiddle.net/internotes/gn6y3tfp/119/。