将 ID 为 X 的可拖动元素拖放到 ID 为 Y 的容器中

Question

我尝试创建一个函数，允许我使用 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 中似乎不起作用）

Answer 1

到目前为止，您做对了所有事情。

将函数绑定到 DOM 元素时，您唯一需要考虑的是当 DOM 完成渲染时，函数必须已经定义.

也就是说，您可以在 <head> 标记中或在页面末尾 <body> 标记关闭之前加载脚本。

您提供的 JSfiddle 将无法工作，因为它会加载 JS 绑定到 onLoad 事件，这意味着页面一打开。将其更改为 head 或 body 就可以了。

Answer 2

我能写出函数，其实很简单：

function dropToContainer(contentID, containerID)
{
  var targetElement  = document.getElementById(contentID);
  var clone     = targetElement.cloneNode(true);

  document.getElementById(containerID).appendChild(clone);
  targetElement.parentNode.removeChild(targetElement);

}

/* ----- 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;
 }

<input type="button" value="move image" onclick="dropToContainer('myDraggable', 'div3');">
<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>

将 ID 为 X 的可拖动元素拖放到 ID 为 Y 的容器中

Drop draggable element with id X to drop container with id Y

html

javascript

drag