如何以编程方式调用 jQuery UI Draggable 拖动开始? [英] How to programmatically invoke jQuery UI Draggable drag start?

问题描述

我在鼠标处于向下位置之后和释放之前创建了一个新的 jQuery 元素.(鼠标按下后).

我想使用 jQuery UI 以编程方式在新元素上触发 dragging，以便它会随着我的鼠标移动自动开始拖动.我不想必须松开然后再次单击鼠标.

我尝试了以下...

var element = $("
");element.appendTo("body").draggable().trigger("mousedown");

...但是这不起作用.

有人对如何实现这一点有任何建议吗?

<小时>

更新: 经过一番搜索 这个问题 有同样的问题.然而，建议的解决方案归结为...

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

...不再适用于最新版本的 jQuery 和 jQuery-UI，而是生成最大调用堆栈超出错误.

解决方案

更新:

请参阅fuzzyBSc 下面的回答.这是做到这一点的正确方法.

---

这完全是一个黑客，但它似乎可以解决问题:

 var myDraggable = $('#mydraggable').draggable();//是的...我们要破解小部件var widget = myDraggable.data('ui-draggable');var clickEvent = null;myDraggable.click(函数(事件){如果(！clickEvent){widget._mouseStart(event);clickEvent = 事件；}别的 {小部件._mouseUp(事件);clickEvent = null;}});$(document).mousemove(function(event){控制台日志(事件)；如果(点击事件){//我们需要将其设置为我们自己的clickEvent，否则//它不会正确定位.widget._mouseDownEvent = clickEvent;小部件._mouseMove(事件);}});

这里是plunker

我的示例使用一个已经存在的元素而不是创建一个元素，但它的工作方式应该类似.

I create a new jQuery element after the mouse is in a down position and before it is released. (After mousedown).

I would like to programmatically trigger dragging on the new element using jQuery UI, so that it will automatically begin dragging with my mouse movement. I don't want to have to release and then click the mouse again.

I have tried the following...

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

...however this does not work.

Does anyone have any suggestions on how to accomplish this?

---

UPDATE: After some searching the poster of this question has the identical problem. However the suggested solution, which boils down to...

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

...no longer works in the latest versions jQuery and jQuery-UI, and instead generates a Maximum Call Stack Exceeded error.

解决方案

UPDATE:

See fuzzyBSc's answer below. It's the proper way to do this.

---

This is totally a hack, but it seems to do the trick:

  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

My example uses an element that already exists instead of creating one, but it should work similarly.

这篇关于如何以编程方式调用 jQuery UI Draggable 拖动开始?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！