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

Question

I am working to extend the Draggable widget by adding guides to the draggable element.

Example 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
  });
});

Currently, the guides are created and appear where expected. When I drag the element, the start event should be triggered and move the guides to the element (and unhide them later).

In console, I see the following, after running and dragging the element:

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

So I can tell that _create is running but start and stop do not seem to fire.

I have also tried to use .on() to bind to dragstart with no change. Example:

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

Based on documentation, I should just be able to call the same widget and use _super().

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

This never seems to work.

Answer 1

To resolve this, I have to make use of the _mouseStart, _mouseDrag, and _mouseStop event callbacks.

Example: 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
  });
});