Question

我尝试创建一个函数，允许我使用ID删除可拖动元素到drop容器。但我不知道如何开始。

＆＃13;

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

＆＃13;

#div1, #div2, #div3
{
  float:left; 
  width:280px; 
  height:180px; 
  margin:10px;
  padding:10px;
  border:1px solid #aaaaaa;
}

＆＃13;

<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>

＆＃13;

这可能吗？

的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的容器

2 个答案: