【发布时间】：2021-03-19 18:08:21
【问题描述】：
我正在努力通过向可拖动元素添加指南来扩展可拖动小部件。
小提琴示例：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()。
为使父方法可用，小部件工厂提供了两种方法 -
_super()和_superApply()。
这似乎永远不会起作用。
【问题讨论】：
-
我在
ui.draggable类中注意到drag, start, stop在options 中用于回调。我想知道这些是否应该以不同的方式处理？我在您的最后一个选项中添加了start: function() {console.log('here')}，我得到了消息输出。我还尝试添加您的 start 函数作为替代，但它抱怨_showGuides函数。我不完全确定可能需要什么。 -
@PaulT。我会测试一下。查看对话框示例，他们在文档中使用
open，这是一种方法。我认为这些会以同样的方式工作。如果您进一步检查，请告诉我您发现了什么。 learn.jquery.com/jquery-ui/widget-factory/extending-widgets/… -
是的，我检查了那个链接，我得到了大部分内容，但它肯定不像描述的那样工作。该文档的最后一次更新是 2015 年 12 月...我想知道该文档是否仍然相关？
-
@PaulT。我深入研究了代码：code.jquery.com/ui/1.12.1/jquery-ui.js，并且 Draggable 使用了鼠标小部件。如果我切换到
_mouseStart，我可以捕获事件并触发我自己的代码。当我尝试返回_super()时，我收到一个新错误：Uncaught TypeError: event is undefined如果我传入event，它似乎可以工作。 -
哦对了，忘了提到那些
_mouse*函数。我也尝试了这些，它也触发了，但我认为你可能宁愿更接近start和其他功能。抱歉没有提及其他功能。
标签： jquery-ui jquery-ui-draggable jquery-ui-widget