首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如果另一个可拖动的div已经在里面,请不要让它进入

如果另一个可拖动的div已经在里面,请不要让它进入
EN

Stack Overflow用户
提问于 2017-06-16 02:54:46
回答 2查看 61关注 0票数 0

我在这里有两个可拖动的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>

EN

回答 2

Stack Overflow用户

发布于 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', ' ');
    }
}
票数 2
EN

Stack Overflow用户

发布于 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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44574929

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档