将拖放区域限制为一些可拖动的元素

Question

我一直在研究他们需要的项目HTML5拖动&拖放，我卡住了一些可能会很容易实现的atm，但我似乎无法找到解决方案。

基本上我有一些可拖动的元素和一些放置区域。由于这是alwasy更容易工作的例子来解释我做了这个简单的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>

UPDATE JSFIDDLE与@Amen溶液。

Answer 1

可以使用data属性逻辑和做以下3次简单的修改，以实现该

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

2）添加到div元素，其中你dragable元件应该追加data-boxtype="red"或blue

3）在Drop(ev)函数中，你可以检查你的document.getElementById(data)和ev.target数据属性值匹配，然后允许丢弃。你可以得到元素data-attribute与JS .getAttribute('data-attribute')功能

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

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

Answer 2

很好的回答阿尔钦，但如果你要处理的dragover事件访问，然后补充说，简单地说是另一个属性。

正如您所看到的，我的JavaScript模块对象中有4个方法都是通过拖放元素事件调用的。

步骤1. OnDragStart事件通过改变数据-TS-的AllowDrop属性设置舞台为“Yes”（其默认是没有），为配合其降元件查询所有的潜在目标。假设一个元素将接受多于一个源，我执行包含查询来查找元素，而不是完全匹配

第2步。当拖动接收元素时，其DragOver事件将检查其“data-ts-allowdrop”属性来查看它是否被设置为true或“是”。如果是这样，则它运行preventsDefault和下拉被允许并且通过该前进到关闭“数据-TS-的AllowDrop”属性的OnDrop方法处理。

步骤3中也使用onEnd设置“数据-TS-的AllowDrop”为否的情况下，拖动事件被取消。

<div id="divName" draggable="true" ondragstart="tsjDragnDrop.setSource(event);" data-ts-drag-allow-source="admin" tabindex="1" ><span >Item to Drag</span><img alt="an icon" src="~/images/anImage.png" /></div> 

<li ondragover="tsjDragnDrop.allowTarget(event);" ondragleave="tsjDragnDrop.onLeave(event)" ondrop="tsjDragnDrop.onDrop(event)" data-ts-drag-allow-target="admin" data-ts-allowdrop="No" >Drop Target in a list item</li> 


var DraggnApi = { 
    allowTarget: function (event) { 
      var source = $(event.currentTarget).attr("data-ts-allowdrop"); 
      $(event.currentTarget).addClass("ts-dragover"); 

      if (source === "Yes") { 
       event.preventDefault(); 
      } 
     }, 

     onLeave: function (event) { 

      $(event.currentTarget).removeClass("ts-dragover"); 
     }, 

     onDrop: function (event) { 
      event.preventDefault(); 
      var source = $(event.currentTarget).removeClass("ts-dragover"); 
      $(event.currentTarget).attr("data-ts-allowdrop", "No"); 
     }, 

     onEnd: function (event) { 

      $(event.currentTarget).attr("data-ts-allowdrop", "No"); 
     }, 

     setSource: function(e) 
     { 
      e.dataTransfer.setData("text", "SomeText"); 

      var source = $(event.currentTarget).attr("data-ts-drag-allow-source"); 

      if ($("li[data-ts-drag-allow-target]").attr("data-ts-drag-allow-target").indexOf(source) > -1) { 
       $("li[data-ts-drag-allow-target*='" + source + "']").attr("data-ts-allowdrop", "Yes"); 
      } 
     } 
    }