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。

Example JSFiddle

编辑

在我的小提琴中似乎有一个奇怪的现象，为什么元素的位置不在鼠标处。这是由float:right;元素的base CSS属性引起的。

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

1 个答案: