Javascript 如果已经有一个可拖动div，则不允许另一个可拖动div进入

我这里有两个可拖动的

div

s要在另一个

div

中拖动，但是如果一个可拖动的

div

已经在拖动目标内。它不应允许另一个

div

进入

功能启动（e）{
e、 dataTransfer.effecAllowed='move'；//定义移动的效果（默认）
e、 dataTransfer.setData（“Text”，e.target.id）；//拾取要移动的项
e、 target.style.opacity='0.4'；
}
/**
* 
执行的函数已完成对元素的拖动。
**/
功能结束（e）{
e、 target.style.opacity=''；//恢复元素的不透明度
e、 数据传输。clearData（“数据”）；
}
/**
* 
当拖动元素进入调用它的元素时执行的函数。
**/
功能输入（e）{
返回true；
}
/**
* 
当拖动元素位于从中调用它的元素上时执行的函数。
*如果可以在该元素中删除对象，则返回false，否则返回true。
**/
（e）上的函数{
if（（e.target.className==“boxes”）| |（e.target.className==“boxes2”））
返回false；
其他的
返回true；
}
/**
* 
函数，当从中调用可拖动元素的元素上删除该元素时执行。
**/
功能下降（e）{
e、 preventDefault（）；//防止执行被删除元素的默认操作。
var elementoArrastrado=e.dataTransfer.getData（“文本”）；
e、 target.appendChild（document.getElementById（elementoArrastrado））；//将删除的元素放在调用此函数的元素上
}

加入
JOIN2
拖动此处

修改您的

拖放

功能，如下所示

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', ' ');
    }
}

---

像这样修改

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', ' ');
    }
}

---

您可以在拖放时检查可拖放div的子对象是否存在。在下面的解决方案中，如果它已经有任何子元素，那么它将跳过作为子元素添加新的拖动元素

功能启动（e）{
e、 dataTransfer.effecAllowed='move'；//定义移动的效果（默认）
e、 dataTransfer.setData（“Text”，e.target.id）；//拾取要移动的项
e、 target.style.opacity='0.4'；
}
/**
* 
执行的函数已完成对元素的拖动。
**/
功能结束（e）{
e、 target.style.opacity=''；//恢复元素的不透明度
e、 数据传输。clearData（“数据”）；
}
/**
* 
当拖动元素进入调用它的元素时执行的函数。
**/
功能输入（e）{
返回true；
}
/**
* 
当拖动元素位于从中调用它的元素上时执行的函数。
*如果可以在该元素中删除对象，则返回false，否则返回true。
**/
（e）上的函数{
if（（e.target.className==“boxes”）| |（e.target.className==“boxes2”））
返回false；
其他的
返回true；
}
/**
* 
函数，当从中调用可拖动元素的元素上删除该元素时执行。
**/
功能下降（e）{
e、 preventDefault（）；//防止执行被删除元素的默认操作。
如果（！e.target.children.length）{
var elementoArrastrado=e.dataTransfer.getData（“文本”）；
e、 target.appendChild（document.getElementById（elementoArrastrado））；//将删除的元素放在调用此函数的元素上
}
}

加入
JOIN2
拖动此处

您可以在拖放时检查可拖放div的子对象是否存在。在下面的解决方案中，如果它已经有任何子元素，那么它将跳过作为子元素添加新的拖动元素

功能启动（e）{
e、 dataTransfer.effecAllowed='move'；//定义移动的效果（默认）
e、 dataTransfer.setData（“Text”，e.target.id）；//拾取要移动的项
e、 target.style.opacity='0.4'；
}
/**
* 
执行的函数已完成对元素的拖动。
**/
功能结束（e）{
e、 target.style.opacity=''；//恢复元素的不透明度
e、 数据传输。clearData（“数据”）；
}
/**
* 
当拖动元素进入调用它的元素时执行的函数。
**/
功能输入（e）{
返回true；
}
/**
* 
当拖动元素位于从中调用它的元素上时执行的函数。
*如果可以在该元素中删除对象，则返回false，否则返回true。
**/
（e）上的函数{
if（（e.target.className==“boxes”）| |（e.target.className==“boxes2”））
返回false；
其他的
返回true；
}
/**
* 
函数，当从中调用可拖动元素的元素上删除该元素时执行。
**/
功能下降（e）{
e、 preventDefault（）；//防止执行被删除元素的默认操作。
如果（！e.target.children.length）{
var elementoArrastrado=e.dataTransfer.getData（“文本”）；
e、 target.appendChild（document.getElementById（elementoArrastrado））；//将删除的元素放在调用此函数的元素上
}
}

加入
JOIN2
拖到这里