Question

基本上我拥有的是一组 doodads ，我需要做的是能够将该组中的任何项目拖动到收容箱中。一旦它们进入盒子中，它们仍然可以自由移动和操作，但是它们不能再被取出，尽管它们可以被删除。

doodads也设置为克隆，因为如果用户愿意，用户可以拥有多个项目。

所以这两个部分是，设置了doodad列表（已经完成），然后使其可拖动，以便可以将其拖入droppable div框。然后第二部分是，一旦它在div框中，它必须再次可拖动，不能克隆，也包含在框中。

这是我的JS代码：

$(document).ready(function() {

function MakeDraggable(item) {
    item.draggable({
        revert : "invalid"
    });
}


$(".doodad").draggable({
    helper : 'clone',
    scroll : true
});

$(".dropped").draggable ({
    containment: ".box"
});
$(".box").droppable({
    accept : ".doodad",
    activeClass : "ui-state-default",
    hoverClass : "ui-state-hover",
    drop : function(event, ui) {

        var droppedItem = $(ui.draggable).clone();
        //droppedItem.class = ".dropped";
        droppedItem.draggable();
        //ui.draggable.draggable('option', 'revert', false);
        //droppedItem.draggable();
        $(this).append(droppedItem);
    }
});

}）;

我尝试了很多东西。我尝试将元素的ID更改为其他内容，以便它可以采用该类的可拖动属性。我也试过在drop函数中编程，但是我遇到了问题。

我不知道如何引用刚刚删除的可拖动元素来操纵它。我被告知它是$(ui.draggable)或$(ui.draggable).clone()，但当我尝试引用它并用我想要的选项调用draggable时，它不起作用。我得到的最好的是它在掉落之后是可拖动的，但它一直在重复，并没有被包含在盒子里。

任何帮助都将非常感谢，我是所有这些东西的新手。我确实看过JQuery API，但在这方面它并没有帮助我。

编辑：

我的Html是：

<body>
    <img src="doodads/i1.gif" class="doodad">
    <img src="doodads/i2.gif" class="doodad">
    <img src="doodads/i3.gif" class="doodad">
    <img src="doodads/i4.gif" class="doodad">
    <div class="box" />
</body>

CSS是：

.box {
    width:500px;
    height:500px;
    background: orange;
}

Answer 1

您可以在已删除的元素上设置类，例如copied并检查被删除的元素是否已经是该类，如果是，则停止克隆。

要限制框内的移动，您可以使用拖放的containment选项：

约束拖动到指定元素的范围内或区域。

代码：

$(document).ready(function () {

    $(".doodad").draggable({
        helper: 'clone',
        scroll: true
    });

    $(".dropped").draggable({
        containment: ".box"
    });
    $(".box").droppable({
        accept: ".doodad",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {
            if ($(ui.draggable).hasClass('copied')) return
            var droppedItem = $(ui.draggable).clone().addClass('copied');
            droppedItem.draggable({
                containment: ".box"
            });
            $(this).append(droppedItem);
        }
    });
});

演示：http://jsfiddle.net/IrvinDominin/ufHMm/

修改

要获取被删除的元素位置，我们必须使用：

来计算和使用它

$(ui.helper).position().top - $(this).position().top
$(ui.helper).position().left - $(this).position().left

我们沿着容器获得帮助位置。

最终代码：

$(document).ready(function () {

    $(".doodad").draggable({
        helper: 'clone',
        scroll: true
    });

    $(".dropped").draggable({
        containment: ".box"
    });
    $(".box").droppable({
        accept: ".doodad",
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function (e, ui) {
            if ($(ui.draggable).hasClass('copied')) return
            var droppedItem = $(ui.draggable).clone().addClass('copied').css({
                position: "relative",
                top: $(ui.helper).position().top - $(this).position().top,
                left: $(ui.helper).position().left - $(this).position().left
            }).draggable({
                containment: ".box"
            });
            $(this).append(droppedItem);

        }
    });
});

演示：http://jsfiddle.net/IrvinDominin/ufHMm/3/

删除拖放后的可拖动元素

1 个答案:

修改