Question

我正在尝试在使用jQuery-UI的drag小部件连接之后立即触发div上的draggable事件。我有一些代码在被拖动时会消失，我还想在页面加载后立即运行此代码。我有时会在其他jQuery处理程序上使用这样的习惯用法来执行此操作：

$('.foo').on('bar', function() {
   console.debug('bar!');
}).trigger('bar');

这似乎不适用于draggable。这是我的代码：

var draggable = $('[draggable]').draggable({
   drag: function(event, ui) {
      //do some stuff
      console.debug(event);
   }
}).trigger('drag');

拖动项目时会调用drag处理程序，但不会在页面加载时调用。

可能相关的信息：

当我拖动项目时，控制台中显示的事件如下所示：

jQuery.Event {
   type: "drag",
   target: div#myElementId.ui-draggable,
   currentTarget: document,
   delegateTarget: document,
   data: null,
   //lots of other properties
}

我尝试了各种调整，但没有任何效果：
- 使用jQuery.Event构造函数并手动设置上述属性
- 使用document.getElementById
- 触发mousedown或mousedown.draggable而不是drag（这是基于我发现的一些解决方法代码）
是的，我意识到我可以单独定义处理程序。我想要这样做的部分原因是可以访问ui参数，这使我可以轻松获取元素的位置和偏移量。我可以通过其他方式找到它们，但这很烦人。我也很好奇为什么这不起作用。
Google和SO上的搜索没有找到任何解决方案，只是与我无关的解决方法，以及其他有关同一问题的投诉。 Jörn Zaefferer from the jQUI team recommended the jQuery.simulate plugin作为解决方法，因此可能无法实现。奇怪的是，它们不会与其他jQuery事件保持一致。

Answer 1

这是jquery ui插件

https://github.com/jquery/jquery-ui/blob/9e8e339648901899827a58e5bf919f7dda03b88e/tests/jquery.simulate.js

在页面上包含该内容，然后只需使用

$("#myElement").simulate('drag');

Answer 2

尝试这样

var draggable = $('[draggable]').draggable({
    drag: function(event, ui) {
        dostuff(ui);
   }
});


function dostuff(ui){
    //do stuff with ui
}

以编程方式触发jQuery-UI可拖动的“拖动”事件

2 个答案: