javascript - 将放置区域限制为某些可拖动元素

Question

我一直在做一个需要 HTML5 拖放的项目，我被困在 atm 中，可能很容易实现，但我似乎找不到解决方案。

基本上我有一些可拖动的元素和一些放置区域。因为用一个有效的例子来解释总是更容易，所以我做了这个简单的 JSFIDDLE

现在您可以将任何元素拖动到任何放置区域或根据需要将它们移出，但我想要实现的是使橙色框仅放置在任何绿色区域(并忽略蓝色区域...如果你把它放在那里，让它移回原来的位置)并且红色框刚好进入蓝色框(忽略绿色框)。

谁能帮助我或提示我解决此问题的方法？

    function DragOver(ev) {
      ev.preventDefault();
    }

    function Drag(ev) {
      ev.dataTransfer.setData("text", ev.target.id);
    }

    function Drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      ev.target.appendChild(document.getElementById(data));
    }


    var elemens = document.querySelectorAll('.draggable');
    [].forEach.call(elemens, function(elem) {
      elem.addEventListener('dragover', DragOver, false);
      elem.addEventListener('drop', Drop, false);
    });

   #divContenedor {
     width: 950px;
     height: 500px;
   }
   
   #div1,
   #div2,
   #div3 {
     width: 350px;
     height: 70px;
     border: 1px solid #aaaaaa;
     background-color: green;
   }
   
   #div4 {
     width: 350px;
     height: 70px;
     border: 1px solid #aaaaaa;
     background-color: blue;
   }

<p>
  Drag&drop testing</p>
<div id="divContenedor" class="draggable" style="background-color: yellow; width: 100%; float: left; position: relative;">
  <div id="drag1" draggable="true" ondragstart="Drag(event)" style="width: 336px; height: 69px; background-color: orange; cursor: move;">1</div>
  <div id="drag2" draggable="true" ondragstart="Drag(event)" style="width: 336px; height: 69px; background-color: orange; cursor: move;">2</div>
  <div id="drag3" draggable="true" ondragstart="Drag(event)" style="width: 336px; height: 69px; background-color: red; cursor: move;">3</div>
</div>
<div style="position: absolute; top: 100px; left: 500px;">
  <div id="div1" class="draggable" ></div>
  <br />
  <div id="div2" class="draggable" ></div>
  <br />
  <div id="div3" class="draggable" ></div>
  <br />
  <div id="div4" class="draggable" ></div>
</div>

更新 JSFIDDLE 使用@Amen 解决方案。

Answer 1

您可以使用 data 属性逻辑并进行以下 3 个简单的修改来实现这一点

1) 添加到draggable 元素属性data-appendto="green" 或blue

2) 添加到 div 元素，您的可拖动元素应该附加 data-boxtype="red" 或 blue

3) 在 Drop(ev) 函数中，您可以检查您的 document.getElementById(data) 和 ev.target 数据属性值正在匹配然后允许删除。可以通过js的.getAttribute('data-attribute')函数获取元素data-attribute

if(ev.target.getAttribute('data-boxtype') == 
   document.getElementById(data).getAttribute('data-appendto')){

  ev.target.appendChild(document.getElementById(data));
}