26

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

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

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

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

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

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

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

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

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

4

5 に答える 5

9

ドラッグ可能なプラグインは、mousedownイベントがその名前空間を使用し、ドラッグ可能なオブジェクトをターゲットとして指すことを想定しています。イベントでこれらのフィールドを変更すると、jQuery1.8.3およびjQueryUI1.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/

于 2014-07-02T05:27:52.767 に答える
4

アップデート：

以下のfuzzyBScの回答を参照してください。これを行うのに適切な方法です。

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

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

これがプランカーです

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

于 2014-09-26T20:41:26.840 に答える
3

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

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

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

于 2012-12-15T15:59:19.483 に答える
1

mousedownイベントを問題の要素にバインドする必要があります。そうすれば、イベントをトリガーできます。

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

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

$('#foo').bind('click', function() {
      alert($(this).text());
    });
    $('#foo').trigger('click');
于 2012-12-14T17:13:39.817 に答える
0

イベント中に要素を作成していて、その要素がそれほど複雑でない場合は、ハックは必要ありません。ドラッグ可能をマウスダウンが発生する要素に設定し、ドラッグ可能なヘルパープロパティを使用して、新しい要素となるヘルパーを作成するだけです。dragStopで、ヘルパーを必要なdom内の場所に複製します。

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

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

于 2016-02-15T06:48:26.937 に答える