0

いくつかの要素をドラッグした後、それ自体を複製し、いくつかを変更し、jQuery UI をドラッグ可能にして、マウスを離すまでhtmlマウス カーソルと一緒に移動する必要があります。

これまでのところ、クローン、変更、およびドラッグ可能にすることができました（http://jsfiddle.net/meridius/qdVueを参照）。何をしてもカーソルで移動できません。

助けていただければ幸いです。

4

1 に答える 1

2

あなたがする必要があるのは、グローバル変数を現在のオブジェクトに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

于 2013-10-29T13:38:11.803 に答える