26

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

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

我尝试了以下...

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 事件使用其命名空间并指向可拖动对象作为目标。在事件中修改这些字段适用于 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/

于 2014-07-02T05:27:52.767 回答
4

更新：

请参阅下面的模糊BSc 答案。这是执行此操作的正确方法。

这完全是一个hack，但它似乎可以解决问题：

  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() 或其快捷方法的事件处理程序都会被触发。但是，可以使用 .trigger() 方法手动触发它们。对 .trigger() 的调用以与用户自然触发事件相同的顺序执行处理程序：

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

如果您在活动期间创建元素并且该元素不太复杂，则不需要黑客。您可以简单地将draggable 设置为发生mousedown 的元素，并使用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');
  }
});

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

于 2016-02-15T06:48:26.937 回答