Question

继承我称为“doIt”的自定义函数，我确定你可以看到它只是允许某人在类或id上调用.doIt（），在这种情况下使背景颜色变为红色然后使元素可拖动。（这是我的第一次尝试，所以请你好。）

(function($) {
   $.fn.doIt = function(customOptions) {
      var options = $.extend({}, $.fn.doIt.defaultOptions, customOptions);
      return this.each(function() {
         var $this = $(this); 
         $this.on('click', function(e){
            e.preventDefault();
            $this.css("background-color", options.color);
            $this.draggable();
         });
      });
   };
   $.fn.doIt.defaultOptions = {
    color: "#000"   
   };               
})(jQuery);

因为我的函数使元素可拖动我想使用一些绑定到draggable的事件，例如'stop'，所以当拖动停止时我希望用户能够访问相同的事件/ ui信息停止的回调。

但是，如何与我的函数中的draggable停止事件进行交互？

我期待看到的是某些东西：

$("div#test").doIt({
    color: "#ffeeaa",
    stop: function(e, ui){

      //interact with draggable event/ui here.  
      //So 'e' and 'ui' would return me what the 'stop' event from draggable would normall return.

    }
});

这是可能的吗？还是我咆哮错误的树？

Answer 1

您只需将选项传递给jQuery即可。显然，你正在定义超出jQuery使用范围的选项，所以你可能想要过滤出jQuery不关心的选项，但我很确定你没有必要; jQuery将忽略它不使用的属性。

所以，你特意试图挂钩stop事件。为此，请更改此行：

$this.draggable();

到此：

$this.draggable({
    stop: customOptions.stop   // Get the callback defined in custom options
});

如果您的自定义选项与jQuery定义的选项之间没有任何命名冲突，您可能只需执行此操作：

$this.draggable(customOptions);

一旦用户停止拖动可拖动元素，jQuery将调用您的函数（将event和ui参数传递给它）。

从自定义函数访问Jquery-UI可拖动事件

1 个答案: