Question

我一直在努力开展一个需要HTML5拖拽的项目。我可能会很容易实现，但我似乎无法找到解决方案。

基本上我有一些可拖动的元素和一些掉落区域。通过一个工作示例我可以更容易地解释一下，我已经做了这个简单的 JSFIDDLE

现在您可以将任何元素拖动到任何拖放区域或根据需要移出它们，但我想要实现的是让橙色框放在任何绿色区域中（并忽略蓝色区域） ......让它移回原来的位置，如果你把它放在那里），红色的盒子只能放入蓝色的盒子里（忽略绿色的盒子）。

任何人都可以帮助我或者暗示我有办法解决这个问题吗？

＆＃13;

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

＆＃13;

   #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;
   }

＆＃13;

<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>

＆＃13;

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

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 data-attribute函数

获取元素.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事件通过将data-ts-allowdrop属性更改为＆＃34; Yes＆＃34;来设置阶段。（对于与其drop元素查询匹配的所有潜在目标，它的默认值为no）。假设一个元素将接受多个源，我执行一个包含查询来查找元素而不是完全匹配

步骤2.当拖动接收元素时，其DragOver事件将检查其＆＃34; data-ts-allowdrop＆＃34;属性以查看它是否已设置为true或＆＃34;是＆＃34;。如果是这样，那么它运行preventDefault并且允许并由OnDrop方法处理掉落，该方法继续关闭＆＃34; data-ts-allowdrop＆＃34;属性。

步骤3.同时使用onEnd设置＆＃34; data-ts-allowdrop＆＃34;如果拖动事件被取消，则为否。

<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");
            }
        }
    }

将掉落区域限制为某些可拖动元素

2 个答案: