拖放列表項

Question

我指的是一個實現拖放系統的例子。 我指的例子如下。

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

我已經在我的項目中成功使用了給定的示例。 唯一的問題是在此示例中我無法將元素移動到最后一個 position。我如何修改此解決方案才能將最后一個元素上方的任何項目移動到最后一個 position。

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',…) )。 您要做的是在任一側拖動一個元素。

一種方法是算出你的鼠標 position 相對於目標項目，然后決定你是更接近項目的開頭還是結尾。 我在以下位置發布了修改版本： 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');
    }
}

任何關於刪除 class 名稱的引用現在都必須刪除兩個class 名稱：

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');
}

當你放下物品時，你需要測試你是在前半部分還是后半部分放下它，也就是在物品之前或之后。 為此，您可以使用 class 名稱：

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');
}

當然，您可以精簡代碼，將其包裝在實用程序 function 中。

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