以编程方式触发jQuery-UI draggable的"拖动"事件

Question

我试图drag在与jQuery-UI的draggable小部件连接之后立即在div上触发事件.我有一些代码在被拖动时会消失,我还想在页面加载后立即运行此代码.我有时在其他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当我将项目拖动处理程序被调用,而不是在页面加载.

可能相关的信息:

1. 当我拖动项目时,控制台中显示的事件如下所示:

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

2. 我尝试了各种调整,但没有任何效果:

   • 使用jQuery.Event构造函数并手动设置上述属性
   • 指定我想要的确切元素 document.getElementById
   • 触发mousedown或mousedown.draggable代替drag(这是基于我发现的一些变通方法代码)
     
     

3. 是的,我意识到我可以单独定义处理程序.我想要这样做的部分原因是可以访问ui参数,这使我可以轻松获得元素的位置和偏移量.我可以通过其他方式找到它们,但这很烦人.我也很好奇为什么这不起作用.

4. 搜索谷歌和搜索引擎优化没有解决方案,只是与我无关的解决方法,以及有关同一问题的其他投诉.来自jQUI团队的JörnZaefferer建议使用jQuery.simulate插件作为解决方法,因此可能无法实现.奇怪的是,它们不会与其他jQuery事件保持一致.

Answer 1

试试这样

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


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