jQuery UI Widget Factory，修改Draggable的开始、拖动、停止

问题描述

我正在努力通过向可拖动元素添加指南来扩展可拖动小部件。

小提琴示例：https://jsfiddle.net/Twisty/0mgrqy48/181/

JavaScript

$(function() {
  $.widget("custom.guidedDrag",$.ui.draggable,{
    options: {
      autoShowGuides: true,guideWidth: "1px",guideStyle: "dashed",guideColor: "#55f",guideSides: ["top","left"]
    },_create: function() {
      this._makeGuides();
      return this._super();
    },_makeGuides: function() {
      var target = this.options.appendTo;
      if (target == "parent") {
        target = this.element.parent();
      }
      var self = this;

      $.each(self.options.guideSides,function(i,side) {
        var styles = {};
        styles['border-' + side + '-width'] = self.options.guideWidth;
        styles['border-' + side + '-style'] = self.options.guideStyle;
        styles['border-' + side + '-color'] = self.options.guideColor;
        styles.position = "absolute";
        styles.top = 0;
        styles.left = 0;
        if (side == "top" || side == "bottom") {
          styles.width = "100%";
          styles.height = "";
          $("<div>",{
            class: "ui-draggable-guide-horizontal-" + side,"data-elem-rel": self.uuid
          }).css(styles).appendTo(target);
        } else {
          styles.width = "";
          styles.height = "100%";
          $("<div>",{
            class: "ui-draggable-guide-vertical-" + side,"data-elem-rel": self.uuid
          }).css(styles).appendTo(target);
        }
        console.log("Guide Created for " + self.uuid + " on " + side + " side.");
      });
    },_showGuides: function() {
      if (this.options.autoShowGuides) {
        this._moveGuides();
        $("div[class*='ui-draggable-guide-'][data-elem-rel='" + this.uuid + "']").show();
      }
    },_hideGuides: function() {
      if (this.options.autoShowGuides) {
        $("div[class*='ui-draggable-guide-'][data-elem-rel='" + this.uuid + "']").hide();
      }
    },_moveGuides: function() {
      var guides = $("div[class*='ui-draggable-guide-'][data-elem-rel='" + this.uuid + "']");
      var t = this.element.position().top,l = this.element.position().left,b = t + this.element.outerHeight(),r = l + this.element.outerWidth();
      $(".ui-draggable-guide-horizontal-top",guides).css("top",t + "px");
      $(".ui-draggable-guide-horizontal-left",guides).css("left",l + "px");
      $(".ui-draggable-guide-horizontal-bottom",b + "px");
      $(".ui-draggable-guide-horizontal-right",r + "px");

    },start: function(event,ui) {
      console.log("Drag Start");
      this._showGuides();
      return this._super();
    },drag: function(event,ui) {
      self._moveGuides();
      return this._super();
    },stop: function(event,ui) {
      console.log("Stop Drag");
      self._hideGuides();
      return this._super();
    },_destroy: function() {
      $("div[class*='ui-draggable-guide-'][data-elem-rel='" + this.uuid + "']").remove();
      return this._super()
    }
  });
  $(".draggable").guidedDrag({
    guideSides: ["top","right"],scroll: false
  });
});

目前，指南已创建并出现在预期位置。当我拖动元素时，应该触发 start 事件并将参考线移动到元素（稍后取消隐藏它们）。

在控制台中，运行并拖动元素后，我看到以下内容：

Guide Created for 0 on top side.
Guide Created for 0 on right side.

所以我可以看出 _create 正在运行，但 start 和 stop 似乎没有触发。

我还尝试使用 .on() 绑定到 dragstart 而没有任何更改。示例：

    _create: function() {
      this._makeGuides();
      var self = this;
      this.element.on("dragstart",function(event,ui){
        console.log("Drag Start");
        self._moveGuides();
      });
      return this._super();
    }

基于 documentation，我应该能够调用相同的小部件并使用 _super()。

为了使父级的方法可用，小部件工厂提供了两种方法 - _super() 和 _superApply()。

这似乎永远行不通。

解决方法

要解决此问题，我必须使用 _mouseStart、_mouseDrag 和 _mouseStop 事件回调。

示例：https://jsfiddle.net/Twisty/0mgrqy48/245/

JavaScript

$(function() {
  $.widget("app.guidedDrag",$.ui.draggable,{
    options: {
      autoShowGuides: true,guideWidth: "1px",guideStyle: "dashed",guideColor: "#55f",guideSides: ["top","left"]
    },_create: function() {
      this._makeGuides();
      this._super();
    },_guideElems: {},_makeGuides: function() {
      var target = this.options.appendTo;
      switch (target) {
        case "parent":
          target = this.element.parent();
          break;
        case "window":
          target = $(window);
          break;
        case "document":
          target = $(document);
          break;
        default:
          target = $(target);
      }

      var self = this;

      $.each(self.options.guideSides,function(i,side) {
        var styles = {};
        styles['border-' + side + '-width'] = self.options.guideWidth;
        styles['border-' + side + '-style'] = self.options.guideStyle;
        styles['border-' + side + '-color'] = self.options.guideColor;
        styles.position = "absolute";
        styles.top = 0;
        styles.left = 0;
        if (self.options.autoShowGuides) {
          styles.display = "none";
        }
        if (side == "top" || side == "bottom") {
          styles.width = "100%";
          self._guideElems[side] = $("<div>",{
            class: "ui-draggable-guide-horizontal-" + side,}).data("ui-draggable-rel",self.uuid).css(styles).appendTo(target);
        } else {
          styles.height = "100%";
          self._guideElems[side] = $("<div>",{
            class: "ui-draggable-guide-vertical-" + side,self.uuid).css(styles).appendTo(target);
        }
        console.log("Guide Created for " + self.uuid + " on " + side + " side.");
      });
    },_showGuides: function() {
      if (this.options.autoShowGuides) {
        this._moveGuides();
        $.each(this._guideElems,g) {
          g.show();
        });
      }
    },_hideGuides: function() {
      if (this.options.autoShowGuides) {
        $.each(this._guideElems,g) {
          g.hide();
        });
      }
    },_moveGuides: function() {
      var t = this.element.position().top,l = this.element.position().left,b = t + this.element.outerHeight(),r = l + this.element.outerWidth();
      $.each(this._guideElems,g) {
        if (g.hasClass("ui-draggable-guide-horizontal-top")) {
          g.css("top",t + "px");
        }
        if (g.hasClass("ui-draggable-guide-horizontal-bottom")) {
          g.css("top",b + "px");
        }
        if (g.hasClass("ui-draggable-guide-vertical-left")) {
          g.css("left",l + "px");
        }
        if (g.hasClass("ui-draggable-guide-vertical-right")) {
          g.css("left",r + "px");
        }
      });
    },_mouseStart: function(event) {
      this._moveGuides();
      this._showGuides();
      this._super(event);
    },_mouseDrag: function(event) {
      this._moveGuides();
      return this._super(event);
    },_mouseStop: function(event) {
      this._hideGuides();
      return this._super(event);
    },_destroy: function(event) {
      $(this._guideElems).remove();
      return this._super(event);
    }
  });

  $(".draggable").guidedDrag({
    guideSides: ["top","right"],scroll: false
  });
});