我尝试创建一个函数，允许我使用 ID 将可拖动元素拖放到拖放容器中。但我不知道如何开始。
dropToContainer("myDraggable", "div3");
function dropToContainer(contentID, containerID)
{
//move draggable Element with contentID to the container with containerID
}
/* ----- DRAG & DROP FUNCTIONS ----------- */
function allowDropStatus(ev) {
ev.preventDefault();
return false;
}
function dragInitialize(ev) {
ev.dataTransfer.effectAllowed='move';
ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
return true;
}
function dropComplete(ev) {
ev.preventDefault();
var src = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(src));
ev.stopPropagation();
return false;
}#div1, #div2, #div3
{
float:left;
width:280px;
height:180px;
margin:10px;
padding:10px;
border:1px solid #aaaaaa;
}<div id="div1" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)">
<img id="myDraggable" src="https://www.webcodegeeks.com/wp-content/uploads/2015/12/WebCodeGeeks-logo.png" draggable="true" ondragstart="return dragInitialize(event)" width="250" height="150" id="drag1">
</div>
<div id="div2" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"></div>
<div id="div3" ondrop="return dropComplete(event)" ondragover="return allowDropStatus(event)"></div>这可能吗？
JSFIDDLE
https://jsfiddle.net/08u9zmau/ (在JSFIDDLE中似乎不起作用)
最佳答案
到目前为止，您所做的一切都是正确的。
将函数绑定(bind)到 DOM 元素时唯一需要考虑的是，函数必须在 DOM 完成渲染时已经定义。
也就是说，您可以在 <head> 中加载您的脚本标签或页面末尾 <body> 之前标签已关闭。
您提供的 JSfiddle 将无法工作，因为它将 JS 加载到 onLoad事件，即页面打开后立即发生。将其更改为 head或body你会没事的。
关于javascript - 放置 id X 的可拖动元素以放置 id Y 的容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36355028/