jquery-ui - jQuery UI Widget Factory,修改Draggable的开始、拖动、停止
问题描述
我正在通过向可拖动元素添加指南来扩展 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", 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();
}
根据文档,我应该能够调用相同的小部件并使用_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,
}).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
});
});
推荐阅读
- c# - 加入会议结果“由于缺少凭据,身份验证失败。” 大蓝按钮?
- php - PHP Logger VPN / Proxy 通过 file_get_contents 和 preg_match 检测
- html - 如何使输入字段仅与可用空间一样宽?
- html - react js内联样式中是否有标签样式
- javascript - Bootstrap 4自定义文件上传未在标签中显示文件名
- r - 编织 Rmarkdown 文件时出错 - 安装 tidyverse 后发生
- php - Laravel 流明没有正确更新
- azure - Azure 工件 - 下载通用工件的特定版本
- sql - 更新在数据库中存储为字符串的 XML 节点
- python-3.x - 如何读取文本数据并转换为 pandas 数据框