复制 Jquery Draggable

发布于 2024-12-05 02:02:56 字数 573 浏览 1 评论 0原文

我正在尝试创建一个可以复制并拖动到可放置物体上的draggalbe 项目。好的，经过一番努力后，继续工作并使生成的重复项可拖动。但是“drop”方法使得如果我多次拖动新克隆，它会继续克隆自身。我明白它为什么这样做，但我不太确定如何关闭它。只有可投放框外的项目才应该是可复制的。一旦进入盒子，复制品也应该能够四处移动，但不能克隆自身。

示例

尝试将小刺猬拖到盒子上（到目前为止，一切顺利。），然后将其拖放到框中几次以查看问题。

$(function() {
    $("#draggable1").draggable({ helper: 'clone', revert: "invalid" });
    $("#panel1").droppable({
        drop: function(event, ui) {
            $(this).append($(ui.helper).clone().draggable());
        }
    });
});

原文

I'm trying to create a draggalbe items that can be duplicated and dragged onto a droppable. Ok, after a little effort, go that working and made the resulting duplicate draggable. But the "drop" method is making it so that if I drag the new clone more than once, It continues to clone itself. I see why it's doing it, but I'm not too sure how to turn it off. Only the item outside the droppable box should be duplicatable. Once inside the box, the duplicate(s) should be able to move around too, but not clone itself.

Example

Try dragging the little hedgehog over to the box (So far, so good.), then drag and drop it inside the box a few times to see the problem.

$(function() {
    $("#draggable1").draggable({ helper: 'clone', revert: "invalid" });
    $("#panel1").droppable({
        drop: function(event, ui) {
            $(this).append($(ui.helper).clone().draggable());
        }
    });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我做我的改变 2024-12-12 02:02:56

您需要一种方法来让 droppable 检测被丢弃的外部刺猬和被丢弃的已被丢弃的刺猬之间的差异。这样，您就可以确保 drop 回调仅克隆从盒子外部掉落的刺猬。

足够方便的是，您已经有一种方法可以检测到这一点：框外的有一个 ID，而框内放置的元素不要。因此，您需要做的就是弄清楚如何在 drop 回调函数内访问已删除元素的“源”。

根据 droppable 文档，ui.draggable 是“当前可拖动元素，一个 jQuery 对象”，因此您可以通过多种方式获取该元素的 id。这是一种可行的方法：

$("#draggable1").draggable({
    helper: 'clone',
    revert: "invalid"
});

$("#panel1").droppable({
    drop: function(event, ui) {
        if (ui.draggable[0].id) {
            $(this).append($(ui.helper).clone().draggable());
        }
    }
});

演示： http://jsfiddle.net/mattball/MJhcp/

自从 < code>ui.draggable 是一个成熟的 jQuery 对象，它也可以使用以下任何对象来代替 ui.draggable[0].id：

ui.draggable.get(0).id
ui.draggable.attr('id')
ui.draggable.prop('id') >

You need a way for the droppable to detect the difference between the outside hedgehog being dropped, and one of the already-dropped hedgehogs being dropped. That way, you can make sure that the drop callback only clones hedgehogs that were dropped from outside of the box.

Conveniently enough, you already have a way to detect this: the <img> outside of the box has an ID, while the dropped <img> elements inside the box do not. So all you need to do is figure out how to access the "source" of the dropped element inside of the drop callback function.

As per the droppable docs, ui.draggable is the "current draggable element, a jQuery object," so you can get that element's id in any of a number of ways. Here's one way that works:

$("#draggable1").draggable({
    helper: 'clone',
    revert: "invalid"
});

$("#panel1").droppable({
    drop: function(event, ui) {
        if (ui.draggable[0].id) {
            $(this).append($(ui.helper).clone().draggable());
        }
    }
});

Demo: http://jsfiddle.net/mattball/MJhcp/

Since ui.draggable is a full-blown jQuery object, it will also work to use any of the following, in lieu of ui.draggable[0].id: