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

Question

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

示例 Fiddle：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", guides).css("top", b + "px");
      $(".ui-draggable-guide-horizontal-right", guides).css("left", 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()。

To make the parent's methods available, the widget factory provides two methods - _super() and _superApply().

这似乎永远行不通。

Answer 1

要解决这个问题，我必须使用 _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,
          }).data("ui-draggable-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();
        $.each(this._guideElems, function(i, g) {
          g.show();
        });
      }
    },
    _hideGuides: function() {
      if (this.options.autoShowGuides) {
        $.each(this._guideElems, function(i, 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, function(i, 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
  });
});

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

jQuery UI Widget Factory, modify start, drag, stop of Draggable

jquery-ui

jquery-ui-draggable

jquery-ui-widget