Php HTML5拖放区

我对拖放有问题

我的问题是，当一个元素被放入dropzone时，它有时会被插入另一个元素，而不是dropzone div

jsFiddle：

在这个例子中，你可以看到我把桌子做得很大，所以很容易看到这个。当一个表放置在另一个表的顶部时，它不会与其他元素一起进入放置区域，而是插入到另一个表的内部

我有一些想法，但我不知道它们是否有效。一个是，如果可以在dropzones上插入一个大div，以确保元素始终被放入其中。我认为这几乎是一个透明的层，捕捉元素，然后将它们放置在放置区中

我的另一个想法是尝试从div中获取所有数据，将其全部放入一个字符串中，并尝试解析这些数据，然后将所有数据替换回dropzone

正如你会注意到的，排序工作，但似乎只有在Firefox，而不是Safari。这不是我最紧迫的问题，但如果你碰巧看到了一个修复，那将是伟大的！（排序只在上面的dropzone上起作用）我不想使用jQuery

代码：

基本拖放示例
@字符集“UTF-8”；
table.draggable-word{
背景色：红色；
填充：0px；
边框：1px纯绿色；
-webkit触摸标注：无；
-webkit用户选择：无；
-khtml用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
边界塌陷：塌陷；
边界间距：0；
填充：0；
保证金：0；
线高：1；
宽度：100%；
高度：50px；
}
.投递部{
宽度：150px；
高度：150像素；
边框：3px实心#224163；
背景色：#AABACC；
边缘顶部：15px；
文本对齐：居中；
溢出：自动；
}
[draggable=true]{
游标：默认值；
边际上限：0px；
边缘底部：0px；
边际上限：0px；
}
桌子{
边框颜色：#600；
边框宽度：0 1px 1px；
边框样式：实心；
}
var user=“”；
var倍数=假；
var数据；
函数dragStartHandler（事件，id）{
event.dataTransfer.setData（'Object'，event.target.id）；
用户=id；
倍数=真；
data=event.dataTransfer.getData（'Object'）；
//多重标记（数据“假”）；
}
函数dropHandler（事件）{
防止违约（事件）；
如果（！event.target）{
警惕（“我们”）；
event.target=event.src元素
}
data=event.dataTransfer.getData（'Object'）；
event.target.appendChild（document.getElementById（数据））；
document.getElementById（数据），selectedIndex=-1；
//警报（用户）；
}
函数dragOverHandler（事件）{
防止违约（事件）；
}
函数默认值（事件）{
if（event.preventDefault）{
event.preventDefault（）；
}
试一试{
event.returnValue=false；
}
捕获（异常）{}
}
函数dragend（事件）{
//多重标记（数据为“真”）；
}
函数多重标记（数据、状态）{
document.getElementById（数据）.setAttribute（“可拖动”，状态）；
}
函数排序（uList）
{
var listItem=document.getElementById（uList.getElementsByTagName（'td'）；
var listLength=listItem.length；
var列表=[]；
对于（var i=0；i parseInt（b）}）
}
对于（var i=0；i来说，drop事件是在子元素上触发的，因此您的
事件.target
是子元素。这是正常的，并且是预期的

而不是像这样立即附加到
事件。target
：

event.target.appendChild(document.getElementById(data));

您需要首先找到父dropzone元素。如果您有类似于jQuery的东西，这是非常简单的，您可以简单地使用。如果您没有，那么类似的东西就会起作用（未经测试，您可能需要消除一些bug）：

这正是我要找的。谢谢！我更新了文件。我现在遇到的问题是“drop-div1”硬编码到while循环中，所以当从较低的div到较高的div时，它工作得非常完美。我无法让它反向工作。你知道如何动态获取元素所在的dropzone的div id吗？我在想一些事情，比如扫描id，然后让所有作为放置区域的div id以某种命名约定开始？我对如何开始有点迷茫。我似乎已经明白了。我使用了substring。两个问题，你能告诉我一个按住shift键选择多个分区的正确方向吗元素，也是一种确保文本永远不会高亮显示且一次只能移动一个元素的方法，除非使用shift来选择多个元素。我基本上是在尝试创建一个选择框，并尝试使用选择框，但事实证明，一些浏览器不允许选择框中的选项可拖动！再次感谢您的帮助！另外，我似乎无法理解为什么我不能让javascript在Safari中进行排序。在FireFox中工作得很好，但在Safari中不起作用。这是最新的文件。谢谢！@dannyn382如果您有多个可以删除的元素，请使用
类
并扫描
类名循环中的属性。如果您有更多问题，请提出更多问题，不要将它们放在只有我可能看到它们的地方的评论中。再次感谢您。我明白您所说的，实际上这就是我使用子字符串所做的，只是我的子字符串非常粗糙。您的方式更加精细。我不想再问其他问题，但看到ton说回答你的问题，所以我想这意味着它会标记你回答的问题。谢谢！
event.target.appendChild(document.getElementById(data));

var dropzone = event.target;
while (dropzone.id != 'drop-div1') {
    dropzone = dropzone.parentNode;
}
dropzone.appendChild(document.getElementById(data));