jQuery UIをプログラムで呼び出す方法ドラッグ可能なドラッグの開始？

Question

マウスを下にしてリリースする前に、新しいjQuery要素を作成します。 （マウスダウン後）。

jQuery UIを使用して、新しい要素上でdraggingをプログラムでトリガーしたいので、自動的にマウスの動きでドラッグを開始します。マウスを離してからもう一度クリックする必要はありません。

var element = $("<div />"); 
element.appendTo("body").draggable().trigger("mousedown"); 

私は以下のことを試してみました

は... ...しかし、これは動作しません。

誰でもこれを達成するための提案はありますか？

---

UPDATE：一部はthis questionのポスターを検索した後、同一の問題を抱えています。しかし...

$("body").on("mousedown", function(e) { 
    $("<div />").draggable().appendTo("body").trigger(e); 
}); 

に沸く提案された解決策は、...もはや最新バージョンのjQueryとjQuery-UIで動作していない、と代わりに最大コールスタックでエラーを超過が生成されます。

Answer 1

これは完全にハックですが、トリックを行うようだ：

var myDraggable = $('#mydraggable').draggable(); 

    // Yeah... we're going to hack the widget 
    var widget = myDraggable.data('ui-draggable'); 
    var clickEvent = null; 

    myDraggable.click(function(event){ 
     if(!clickEvent){ 
     widget._mouseStart(event); 
     clickEvent = event; 
     } 
     else { 
     widget._mouseUp(event); 
     clickEvent = null; 
     } 
    }); 

    $(document).mousemove(function(event){ 
    console.log(event); 
    if(clickEvent){ 
     // We need to set this to our own clickEvent, otherwise 
     // it won't position correctly. 
     widget._mouseDownEvent = clickEvent; 
     widget._mouseMove(event); 
    } 
    }); 

Here's the plunker

私の例では、すでに代わりに存在する要素を使用しています1つを作成するのも同様ですが、同様に動作するはずです。

Answer 2

問題の要素にmousedownイベントをバインドする必要があります。イベントをトリガーできます。対応するイベントが発生したときに​​

から

.bindと接続されているすべてのイベントハンドラ（）またはそのショートカットの一つ 方法がトリガされます。ただし、.trigger（）メソッドを使用すると手動で を起動できます。 .trigger（）への呼び出しは イベントは、ユーザーが自然に誘発された場合、同じ順序でハンドラは、彼らは次のようになり実行：マウスオーバーであなたのドラッグ可能な関数を作成します

$('#foo').bind('click', function() { 
     alert($(this).text()); 
    }); 
    $('#foo').trigger('click'); 

Answer 3

を

$('#futureDragableElement').mouseover(function() { 
    $(this).draggable(); 
}); 

ドラッグ可能な初期化が既に行われているので、最初のマウスクリックが考慮されます

Answer 4

ドラッグ可能なプラグインは、マウスイベントを私たちに期待していますそのネームスペースを削除し、ドラッグ可能なオブジェクトをターゲットとして指すようにします。イベントのこれらのフィールドを変更することは、jQuery 1.8.3およびjQuery UI 1.9.2で動作します。

$("body").on("mousedown", function(e) { 
    var div = $("<div />").draggable().appendTo("body"); 
    e.type = "mousedown.draggable"; 
    e.target = div[0]; 
    div.trigger(e); 
}); 

ここにデモ：http://jsfiddle.net/maCmB/1/

Answer 5

イベント中に要素を作成していて、その要素があまり複雑でない場合、ハックは必要ありません。あなたは単純にマウス操作が発生する要素にdraggableを設定し、draggableヘルパープロパティを使用して新しい要素になるヘルパーを作成することができます。 dragStopで、あなたが望むdomの場所にヘルパーをクローンします。

$('body').draggable({ 
    helper: function() { 
    return '<div>your newly created element being dragged</div>'; 
    }, 
    stop: function (e,ui) { 
    ui.helper.clone().appendTo('body'); 
    } 
}); 

もちろん、ヘルパーの位置を設定する必要があります。その上にマウスがあります。これは単なる非常に基本的な例です。