拖動創建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對象OU的創建，我們然後監視mousemove事件的文檔和所創建的對象的前面的代碼被移動到鼠標的位置-20 。一旦mouseup事件發生在文檔上，我們將currentObj重置爲null。

Example JSFiddle

編輯

似乎是在我的小提琴一個奇怪的發生，爲什麼元素的位置不是鼠標。這是由您的base元素的float:right; CSS屬性引起的。