我在这里有两个可拖动的div
,要在另一个div
中拖动,但如果一个可拖动的div
已经在拖动目的地中。它不应该允许另一个div
进入
function start(e) {
e.dataTransfer.effecAllowed = 'move'; // Defines the effect of moving (it is the default)
e.dataTransfer.setData("Text", e.target.id); // Pick up the item to be moved
e.target.style.opacity = '0.4';
}
/**
*
Function that is executed is finished dragging the element.
**/
function end(e) {
e.target.style.opacity = ''; // Restores the opacity of the element
e.dataTransfer.clearData("Data");
}
/**
*
Function that is executed when a dragging element enters the element from which it is called.
**/
function enter(e) {
return true;
}
/**
*
Function that is executed when a dragging element is on the element from which it is called.
* Returns false if the object can be dropped in that element and true otherwise.
**/
function over(e) {
if ((e.target.className == "boxes") || (e.target.className == "boxes2"))
return false;
else
return true;
}
/**
*
Function that is executed when a draggable element is dropped on the element from which it is called.
**/
function drop(e) {
e.preventDefault(); // Prevents the default action of the dropped element from being executed.
var elementoArrastrado = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(elementoArrastrado)); // Place the dropped element on the element from which this function was called
}
<div id="join1" draggable="true" ondragstart="start(event)" ondragend="end(event)"> JOIN </div>
<div id="join2" draggable="true" ondragstart="start(event)" ondragend="end(event)"> JOIN2 </div>
<div style="" class="boxes2" id="1" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">DRAG HERE</div>
发布于 2017-06-17 07:08:37
像这样修改你的drop
函数
function drop(e){
if (!e.target.hasAttribute('data-drop-done')) {
e.preventDefault(); // Prevents the default action of the dropped element from being executed.
var elementoArrastrado = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(elementoArrastrado)); // Place the dropped element on the element from which this function was called
// indicates that a div was dropped into the drop zone
e.target.setAttribute('data-drop-done', ' ');
}
}
发布于 2018-05-28 19:35:54
您可以在删除时检查dropable div的子项是否存在。在下面的解决方案中,如果它已经有任何子元素,那么它将跳过添加新的被拖动元素作为子元素。
function start(e) {
e.dataTransfer.effecAllowed = 'move'; // Defines the effect of moving (it is the default)
e.dataTransfer.setData("Text", e.target.id); // Pick up the item to be moved
e.target.style.opacity = '0.4';
}
/**
*
Function that is executed is finished dragging the element.
**/
function end(e) {
e.target.style.opacity = ''; // Restores the opacity of the element
e.dataTransfer.clearData("Data");
}
/**
*
Function that is executed when a dragging element enters the element from which it is called.
**/
function enter(e) {
return true;
}
/**
*
Function that is executed when a dragging element is on the element from which it is called.
* Returns false if the object can be dropped in that element and true otherwise.
**/
function over(e) {
if ((e.target.className == "boxes") || (e.target.className == "boxes2"))
return false;
else
return true;
}
/**
*
Function that is executed when a draggable element is dropped on the element from which it is called.
**/
function drop(e) {
e.preventDefault(); // Prevents the default action of the dropped element from being executed.
if (!e.target.children.length) {
var elementoArrastrado = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(elementoArrastrado)); // Place the dropped element on the element from which this function was called
}
}
<div id="join1" draggable="true" ondragstart="start(event)" ondragend="end(event)"> JOIN </div>
<div id="join2" draggable="true" ondragstart="start(event)" ondragend="end(event)"> JOIN2 </div>
<div style="" class="boxes2" id="1" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">DRAG HERE</div>
https://stackoverflow.com/questions/44574929
复制相似问题