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