jquery - 拖动以创建 jQuery UI 可拖动并用鼠标移动直到释放

Question

在我拖动一些html元素后，我需要它来复制自己，改变一些东西，变成 jQuery UI 可拖动并随着鼠标光标移动，直到我释放鼠标。

到目前为止，我设法克隆、更改和拖动（参见http://jsfiddle.net/meridius/qdVue），无论我做什么，我都无法让它随光标移动。

帮助表示赞赏。

Answer 1

您需要做的是将一个全局变量设置为当前对象并监视MouseMove元素（或文档）的事件并将元素的左/上位置设置为鼠标的位置。

var currentObj = null;

$(".js-factory")
    .on("mousedown", ".js-form .js-base", function (event) {
        var figurka = $(this).clone(false).addClass("figurka").draggable({
            snapMode:   "inner",
            snapTolerance   :   55
        }).wrapInner("<div class='fig-wrap'></div>");
        $(".js-park").append(figurka);
        currentObj = figurka;
    });
$(document).mousemove(function(e) {
    if (currentObj) {
        currentObj.css({'top':e.clientY - 20, 'left':e.clientX - 20});
    }
});
$(document).on('mouseup', function() {
    currentObj = null;
});

在前面的代码中我们将 的值设置为创建currentObj的figurka对象的值，然后我们监视mousemove文档的事件并将创建的对象移动到鼠标的位置-20。一旦mouseup事件发生在文档上，我们将其重置currentObj为null.

示例 JSFiddle

编辑

关于为什么元素的位置不在鼠标上，我的 Fiddle 似乎出现了奇怪的情况。这是由元素的float:right;CSS 属性引起的。base