Question

我在鼠标处于向下位置之前和释放之前创建一个新的jQuery元素。（在mousedown之后）。

我想使用jQuery UI以编程方式触发新元素上的dragging，这样它就会自动开始拖动鼠标移动。我不想发布然后再次单击鼠标。

我试过以下......

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

......但这不起作用。

有没有人对如何做到这一点有任何建议？

更新：经过一些搜索，this question的海报有相同的问题。然而，建议的解决方案，归结为......

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

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

Answer 1

draggable插件期望其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/

Answer 2

这完全是一个黑客攻击，但似乎可以解决问题：

  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

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

Answer 3

在鼠标悬停时创建可拖动功能

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

由于已经完成了可拖动的初始化，因此将首先点击鼠标

Answer 4

您必须将mousedown事件绑定到相关元素，然后才能触发事件。

来自http://api.jquery.com/trigger/

任何附加.bind（）或其快捷方式的事件处理程序当相应的事件发生时触发方法。他们可以但是，使用.trigger（）方法手动触发。打电话给 .trigger（）以与它们相同的顺序执行处理程序该事件由用户自然触发：

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

Answer 5

如果您在活动期间创建元素并且该元素不太复杂，则不需要黑客。您可以简单地将draggable设置为mousedown发生的元素，并使用draggable helper属性创建一个将成为新元素的帮助器。在dragStop上将帮助器克隆到您想要的dom中的位置。

>> x = chr(0x7B) + chr(0x34) + chr(0x65) +chr(0x43)
>> y = "".join(x)
>> z = struct.unpack("<f",y)
>> print z
(229.2050,)

当然你需要为助手设置位置，所以鼠标就在它上面。这只是一个非常基本的例子。

如何以编程方式调用jQuery UI Draggable拖动启动？

5 个答案: