Question

问候语。我目前正在使用HTML5拖放API的幻灯片创建器。通过这些API，我可以创建用户上传图像的网格。这些图像可以按照您想要的任何顺序重新排列，但只能通过一对一交换。我希望能够将图像放在另一个图像的顶部，使其前面的所有图像向右移动。

I.E我插入一个新图像，然后将其放在图像5上。我不是要移动到框6,6到7,7到8的图像5，依此类推。我希望能够以这种方式插入图像，将这些图像交换出来。我只是想弄清楚如何实现这一目标。这是我的代码

   var dragSrcEl = null;
    var cols = document.querySelectorAll('#columns .column');
    [ ].forEach.call(cols, function (col) {
        col.addEventListener('dragstart', handleDragStart, false);
        col.addEventListener('dragenter', handleDragEnter, false)
        col.addEventListener('dragover', handleDragOver, false);
        col.addEventListener('dragleave', handleDragLeave, false);
        col.addEventListener('drop', handleDrop, false);
        col.addEventListener('dragend', handleDragEnd, false);
    });

function handleDragStart(e) {
  // Target (this) element is the source node.
  dragSrcEl = this;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
  return false;
}
function handleDragEnter(e) {
  // this / e.target is the current hover target.
  this.classList.add('over');
}
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.
        dragSrcEl.innerHTML = this.innerHTML;
        this.innerHTML = e.dataTransfer.getData('text/html');
    }

    return false;
}

function handleDragEnd(e) {
  // this/e.target is the source node.

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

如果有人对此有任何经验，或任何有智慧的话，我将非常感激。

的的 ** * * 闭的 * ** * * 切换回Html5 Drag。这是浪费。

CLOSED - 在HTML中拖放 - 在框之间删除JavaScript

0 个答案: