web-dev-qa-db-ja.com

プログラムでjQuery UI Draggable drag startを呼び出す方法は？

マウスを下に置いてから離す前に、新しいjQuery要素を作成します。 （マウスダウン後）。

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

私は以下を試しました...

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

...しかし、これは機能しません。

これを達成する方法について誰かが何か提案はありますか？

UPDATE：この質問 の投稿者を検索した後、同じ問題が発生します。しかし、提案された解決策は、要約すると...

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

...最新バージョンのjQueryとjQuery-UIでは動作しなくなり、代わりに最大呼び出しスタック超過エラーが生成されます。

jquery-uijqueryjquery-ui-draggable
25
user1031947

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

  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);
    }
  });

ここにプランカーがあります

私の例では、要素を作成する代わりに既存の要素を使用していますが、同様に機能するはずです。

4
NanoWizard

ドラッグ可能なプラグインは、そのmousedownイベントがそのネームスペースを使用し、ドラッグ可能なオブジェクトをターゲットとしてポイントすることを期待しています。イベントでこれらのフィールドを変更すると、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/

6
fuzzyBSc

マウスオーバーでドラッグ可能な関数を作成する

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

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

3
sdespont

問題の要素にマウスダウンイベントをバインドする必要があります。その後、イベントをトリガーできます。

から http://api.jquery.com/trigger/

.bind（）またはそのショートカットメソッドの1つに関連付けられているイベントハンドラーは、対応するイベントが発生するとトリガーされます。ただし、.trigger（）メソッドを使用して手動で起動できます。 .trigger（）の呼び出しは、イベントがユーザーによって自然にトリガーされた場合と同じ順序でハンドラーを実行します。

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

イベント中に要素を作成していて、その要素が複雑すぎない場合は、ハックは必要ありません。マウスダウンが発生する要素に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');
  }
});

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

0
Maciej Krawczyk