Question

我正在尝试为简单的图形创建创建一种可视化界面。它由10个图像图标和5个可以放置这些图标的框组成。我希望用户能够选择他们想要显示的10个图标中的哪一个，并使用拖放功能按照他们认为合适的方式排列元素。 5个图标也位于可以删除图标的div内，因此如果他们改变主意并希望选择其他图标，他们可以将图标返回到“主页”行。

与这个简单的教程不同，但有更多的div和图标： http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

我的剧本：

<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
//CSS CHANGES HERE FOR ON PICKUP
$( ".dragfive" ).css("border", "2px solid #ff9d00");
$( ".select5" ).css("border", "2px solid #ff9d00");
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
//CSS CHANGES HERE FOR ON DROP
$( ".dragfive" ).css("border", "2px solid transparent");
$( ".select5" ).css("border", "2px solid transparent");
}
</script>

我的代码与教程完全相同，但我添加了一些不错的CSS更改，如评论所示 - 我制作了彩色边框，向用户显示他们可以放置项目的位置。掉落后变得透明。完美无缺......

如何防止图标被放在另一个图标上？（或者更确切地说，只允许将图标放入空div中？）
如果我想创建第二组图标并复制过程，我该如何保持它们和允许的丢弃区域分开？（这样图标不会在非预期的地方结束）

感谢一帮。

Answer 1

使用它，它已经适用于我的脚本...为了防止div中的丢失，它已经有了像 - image这样的东西。

if (ev.target.hasChildNodes()) {
    ev.target.appendChild(document.getElementById(data));
}

Answer 2

对于＃1，您需要使drop功能更加智能化。在其中，检查以确保在附加Child之前没有childNodes。

对于＃2，您需要使drag和drop更加智能化。在drag中，您需要查看目标并设置一些组信息。在drop中，您需要检查该信息以确定其是否匹配。

我可以告诉你＃1应该是什么样的：

function drop(ev)
{
    ev.preventDefault();
    if (ev.target.hasChildNodes()) { return; }
    // ...all the rest as you had it

对于＃2，它会稍微复杂一些，具体取决于您想要如何定义第二组图标。通常，它应该使您的代码看起来像这样：

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
    // I'm going to assume your group1 items will have "group1" in their id.  Set it up however you want.
    if (ev.target.id.indexOf("group1") != -1) {
        ev.dataTransfer.setData("Group", 1);
    } else {
        ev.dataTransfer.setData("Group", 2);
    }
    // ...all the rest as you had it
}

function drop(ev)
{
    ev.preventDefault();
    if (ev.target.hasChildNodes()) { return; }
    if (ev.target.id.indexOf("group1") != -1 && ev.dataTransfer.getData("Group") == 2 ||
        ev.target.id.indexOf("group2") != -1 && ev.dataTransfer.getData("Group") == 1) {
            return;
        }
    // ...all the rest as you had it

Answer 3

我最后只是添加了

ev.target.appendChild(document.getElementById(data).cloneNode(true));

到drop命令的末尾，这样我就不会丢失图标。这是问题1的解决方法，因为我无法阻止根据预期目标div的子节点删除我拾取的数据。我可以使用if (ev.target.hasChildNodes()) { return; }

阻止覆盖

，但我仍然会丢失我用拖拽拾取的数据，而不是像我希望的那样拒绝掉落。使用上面的代码复制它们是最好的解决方法。它丢失元素的问题是由id中的拼写引起的。斯科特将图标分成小组的方法非常有效。

Answer 4

我为解决这个问题所做的可能很奇怪，但它确实有效！我刚刚完成了这个功能：

<link href="http://jschr.github.io/bootstrap-modal/css/bootstrap-modal.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modal.js"></script>
<script src="http://jschr.github.io/bootstrap-modal/js/bootstrap-modalmanager.js"></script>



<div class="page-container">
    <div class="container">
        <br />
        <button class="btn launchConfirm">Launch Confirm</button>
    </div>
</div>

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Do you want to continue?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" data-value="1">Continue</button>
    <button type="button" data-dismiss="modal" class="btn" data-value="0">Cancel</button>
  </div>
</div>

我在致电function testDiv(ev, x) { if (x.length > 0) { return false; } else { allowDrop(ev); return true; } }之前调用此函数。 allowdrop是x的{{1}}。它对我来说很完美！

除非div为空，否则html5拖放会阻止掉落

4 个答案: