我遇到拖放问题。
我的问题是，当一个元素被放入 dropzone 时，它有时会被插入到另一个元素而不是 dropzone div。
jsFiddle:http://jsfiddle.net/kMbPF/
在示例中，您可以看到我将表格制作得非常大，因此很容易看到这一点。当一个表被放置在另一个表之上时，它不会与其他元素一起进入放置区，而是被插入到另一个表内。
我有几个想法，但我不知道它们是否可行。一个是如果可以以某种方式在拖放区上插入一个大的 div 以确保元素总是被拖放到其中。我会把它看作一个几乎透明的层，它捕捉元素然后将它们放置在拖放区。
我的另一个想法是尝试从 div 中获取所有数据，将其全部放入一个字符串中，然后尝试对其进行解析，然后将所有数据替换回 dropzone。
您还会注意到，排序有效，但似乎只在 Firefox 中有效，在 Safari 中无效。这不是我最紧迫的问题，但如果您确实碰巧看到了一个很好的修复程序!(排序仅适用于上部拖放区)我不想使用 jQuery。
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic drag and drop example</title>
<style>
@CHARSET "UTF-8";
table.draggable-word {
background-color: red;
padding: 0px;
border: 1px solid green;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
line-height: 1;
width: 100%;
height:50px;
}
.drop-div {
width: 150px;
height: 150px;
border: 3px solid #224163;
background-color: #AABACC;
margin-top: 15px;
text-align: center;
overflow: auto;
}
[draggable=true] {
cursor: default;
margin-top: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
table {
border-color: #600;
border-width: 0 0 1px 1px;
border-style: solid;
}
</style>
<script>
var user ="";
var multiples = false;
var data;
function dragStartHandler(event,id) {
event.dataTransfer.setData('Object', event.target.id);
user = id;
multiples = true;
data = event.dataTransfer.getData('Object');
//multipleDrag(data,"false");
}
function dropHandler(event) {
preventDefaults(event);
if (!event.target) {
alert('we');
event.target = event.srcElement
}
data = event.dataTransfer.getData('Object');
event.target.appendChild(document.getElementById(data));
document.getElementById(data).selectedIndex = -1;
//alert(user);
}
function dragOverHandler(event) {
preventDefaults(event);
}
function preventDefaults(event) {
if (event.preventDefault) {
event.preventDefault();
}
try {
event.returnValue = false;
}
catch (exception) {}
}
function dragend(event) {
// multipleDrag(data,"true");
}
function multipleDrag(data,state){
document.getElementById(data).setAttribute("draggable", state);
}
function sort(uList)
{
var listItem = document.getElementById(uList).getElementsByTagName('td');
var listLength = listItem.length;
var list = [];
for(var i=0; i<listItem.length; i++){
list[i] = listItem[i].id.substring(1,listItem[i].id.length);
list.sort(function(a,b) {return parseInt(a) > parseInt(b)})
}
for(var i=0; i<listLength; i++){
listItem[i].firstChild.nodeValue = list[i];
}
}
</script>
</head>
<body>
<div class="drop-div"
ondragover="dragOverHandler(event);"
ondrop="dropHandler(event)"
id="drop-div1" ondragend="sort('drop-div1')"></div>
<div class="drop-div"
ondragover="dragOverHandler(event);"
ondrop="dropHandler(event)"
id="drop-div2">
<table draggable="true"
ondragstart="dragStartHandler(event,'3');"
class="draggable-word"id="d3" ondragend="dragend(event);"
><tr><td id="d3">3</td></tr></table>
<table draggable="true"
ondragstart="dragStartHandler(event,'4');"
class="draggable-word"
id="d4" ondragend="dragend(event);"><tr><td id="d4">4</td></tr></table>
<table draggable="true"
ondragstart="dragStartHandler(event,'4');"
class="draggable-word"
id="d5" ondragend="dragend(event);"><tr><td id="d5">5</td></tr></table>
<table draggable="true"
ondragstart="dragStartHandler(event,'4');"
class="draggable-word"
id="d6" ondragend="dragend(event);"><tr><td id="d6">6</td></tr></table>
<table draggable="true"
ondragstart="dragStartHandler(event,'4');"
class="draggable-word"
id="d7" ondragend="dragend(event);"><tr><td id="d7" >7</td></tr></table>
<table draggable="true"
ondragstart="dragStartHandler(event,'4');"
class="draggable-word"
id="d8" ondragend="dragend(event);"><tr><td id="d8" >8</td></tr></table>
<table draggable="true"
ondragstart="dragStartHandler(event,'4');"
class="draggable-word"
id="d9" ondragend="dragend(event);"><tr><td id="d9">9</td></tr></table>
<table draggable="true"
ondragstart="dragStartHandler(event,'4');"
class="draggable-word"
id="d10" ondragend="dragend(event);"><tr><td id="d10">10</td></tr></table>
<table draggable="true"
ondragstart="dragStartHandler(event,'4');"
class="draggable-word"
id="d11" ondragend="dragend(event);"><tr><td id="d11">11</td></tr></table>
<table draggable="true"
ondragstart="dragStartHandler(event,'4');"
class="draggable-word"
id="d12" ondragend="dragend(event);"><tr><td id="d12">12</td></tr></table>
<table draggable="true"
ondragstart="dragStartHandler(event,'4');"
class="draggable-word"
id="d13" ondragend="dragend(event);"><tr><td id="d13">13</td></tr></table>
</div>
<div id="print"></div>
</body>
</html>
最佳答案
drop 事件在子元素上触发，因此您的 event.target 是子元素。这是正常的event bubbling并且只是在意料之中。
而不是像这样立即附加到 event.target:
event.target.appendChild(document.getElementById(data));
您需要先找到父dropzone 元素。这非常简单，如果你有类似 jQuery 的东西，你可以简单地使用 closest method .如果你不这样做，那么像这样的东西就会起作用(未经测试，你可能需要解决一些错误):
var dropzone = event.target;
while (dropzone.id != 'drop-div1') {
dropzone = dropzone.parentNode;
}
dropzone.appendChild(document.getElementById(data));
关于php - HTML5 拖放放置区，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13040697/