3

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

与这个简单的教程不同，但有更多的 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 更改，正如注释所示 - 我让彩色边框看起来向用户指示他们可以放置项目的位置。这些一旦掉落就会变得透明。完美运行，除了...

  1. 如何防止图标被放在另一个图标之上？（或者更确切地说，只允许将图标放入空的 div 中？）
  2. 如果我希望创建第二组图标并复制该过程，我怎样才能将它们与其允许的放置区域分开？（这样图标就不会出现在意想不到的地方）

谢谢一堆。

4

4 回答 4

2

使用它，它适用于我的脚本......为了防止 div 中已经有一些东西，比如图像。

if (ev.target.hasChildNodes()) {
    ev.target.appendChild(document.getElementById(data));
}
于 2015-05-01T06:18:50.847 回答
1

对于#1，你需要让你的drop函数更智能一点。在其中，检查以确保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
于 2013-10-14T21:40:11.917 回答
0

我最后只是添加

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

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

，但我仍然会丢失通过拖动获取的数据，而不是像我希望的那样拒绝下降。使用上面的代码复制它们是最好的解决方法。将元素乱序删除的问题是由 id 中的拼写错误引起的。Scott 将图标分组的方法非常有效。

于 2013-10-15T15:33:58.407 回答
0

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

function testDiv(ev, x) {
    if (x.length > 0) {
        return false;
    }
    else {
        allowDrop(ev);
        return true;
    }
}

我在调用之前调用了这个函数allowdrop。x是innerHTML的div。它非常适合我！

于 2015-06-28T15:47:00.110 回答