问候。我目前正在开发一个使用 HTML5 拖放 API 的幻灯片创建器。使用这些 API,我已经能够创建用户上传图像的网格。这些图像可以按照您想要的任何顺序重新排列,但只能通过一对一交换。我想做的是能够将图像放在另一个图像的顶部,导致它前面的所有图像都向右移动。
IE 我插入一个新图像,并将其放在图像 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 拖动切换。它是一种浪费。