对此可能有一个非常简单的解决方案,但我只是无法考虑清楚。
我正在处理一个图片库管理页面。我正在使用拖放界面,因此用户可以管理其画廊的顺序和内容。
到目前为止,拖放工作完美。当我将一张图像拖放到另一张图像上时,它们会交换位置。就像魔术一样。
作为一个完整的菜鸟,我很高兴能走到这一步。
这是我已经被困了好几天的地方。我试图找出一种方法将图像链接到它们的新位置,以便我可以将该信息提交到数据库。
我在想有一种方法可以让javascript创建命名为匹配列的变量并将图像ID分配给占据其位置的图像ID。我还没想好怎么做。
我也对其他想法持开放态度。
这是我的PHP:
$result = mysqli_query($con, "
SELECT *
FROM `gallery`
WHERE `order`") or die(mysqli_error());
$i = 0;
while ($row=mysqli_fetch_array($result))
{
$i++;
echo "<div id=columns>";
echo "<div class='column' id='c".$i."'><header>" . $i . "</header>";
echo "<div class='columncontent' draggable='true'><img src='../gallery/gimages/" . $row['file'] . "' width='75px' title='" .$row['name']. "' id='i" .$row['id']. "'><br>" . $row['name'] . "</div></div></div>";
}
这是我的 javascript
<script type="text/javascript">
var dragSrcEl = null;
function handleDragStart(e) {
dragSrcEl = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', this.innerHTML);
e.dataTransfer.setData('text/plain', this.innerHTML);
}
var cols = document.querySelectorAll('#columns .columncontent');
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false);
});
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
}
function handleDragEnter(e) {
this.classList.add('over');
}
function handleDragLeave(e) {
this.classList.remove('over');
}
function handleDrop(e) {
if (e.stopPropagation) {
e.stopPropagation();
}
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML;
this.innerHTML = e.dataTransfer.getData('text/plain');
}
return false;
}
function handleDragEnd(e) {
[].forEach.call(cols, function (col) {
col.classList.remove('over');
});
}
var cols = document.querySelectorAll('#columns .columncontent');
[].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);
});
</script>
谢谢你的帮助。