1

基本上我所拥有的是一组装饰物，而我需要做的是能够将该组中的任何项目拖到一个收容箱中。一旦它们在盒子中，它们仍然可以自由移动和操纵，但它们不能再次从盒子中取出，尽管它们可以被删除。

装饰物也被设置为克隆，因为如果用户愿意，他们可以在框中拥有多个项目。

所以这两部分是，设置doodad列表（已经完成），然后使其可拖动，以便可以将其拖动到可放置的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), or $(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;
}
4

1 回答 1

4

例如，您可以在删除的元素上设置一个类，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/

于 2013-09-07T15:40:53.690 回答