Question

我有一系列图标被拖到画布/地图上。拖动图标后 - 图标将替换为原始位置，因此用户可以将第二个图标（同一图片）拖到画布上。

我已经完成所有项目.draggable()，当第一个图标被拖到地图上时，我只需使用jquery .append()重新创建原始位置的图标。

我的问题是创建了图标的第二个实例 - 但之后不再创建 - 留下空白。

我需要这是一个无限循环，因此用户可以将尽可能多的相同图像放到画布上。

我的代码如下，我创建了一个随机生成的数字，以确保我可以为其分配.draggable()：

$('img#icon').draggable({
            stop: function(event, ui) {

                // Show dropped position.
                var Stoppos = $(this).position();
                var left = Math.abs(Stoppos.left);
                var top = Math.abs(Stoppos.top);
                $(this).css('left: ' + left);
                $(this).css('top: ' + top);

                var rand = [randomly generated number];
                var src = $(this).attr("src");
                var cl = $(this).attr("class");
                var id = $(this).attr("id");
                var img = "<img src='"+src+"' id='"+id+"' class='"+cl+" "+rand+"' />";
                $(this).parent().append(img);
                $("img."+rand).draggable();
            }
        });

所以有了上面的内容，在我将img.rand拖到画布上之后 - 它没有被替换为它的原始位置。希望这是有道理的，并且一如既往地受到赞赏。

Answer 1

这不需要无限循环。你需要的是制作画布droppable。删除dragstop函数并将您的代码添加到droppable函数中：

$('#canvas').droppable({
            accept:'.icons', //remove this if you want to append manually
            drop:function(event,ui){

                      //Code for appending manually if you don't use accept

            }
});

对于一系列图标，可以将其作为克隆拖动，以便您可以拖动“否”。相同的图标到画布上：

$('.icons').draggable({helper: "clone"});

有关可放置UI的更多信息，请参阅API DOC.

如何在.append（）之后用jquery创建一个无限循环并使其可拖动

1 个答案: