我正在尝试在我的应用程序中实现一个选择多个元素的功能,但由于我是前端开发的新手,所以我在控制 JavaScript 的事件和 CSS 时遇到了一些麻烦。我找到了 this post所以我用它作为我的指南。
在使用 Selectable() 函数之前,我添加了一个类(带有一些 CSS)来为我的元素提供被选中的外观(一次单击一个),如果我想取消选中它,我只需单击 Canvas (触发删除类“selectedEffect”的函数)。
但现在我想选择多个元素(将来我希望能够对它们进行分组),所以我开始使用 Selectable() 并且正如我所说,我发现那篇文章对我有部分帮助。我能够将这段代码复制到我的元素中:
// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0};
$( "#canvas > div" ).draggable({
start: function(ev, ui) {
editorContent.addClass("hidden");
if ($(this).hasClass("ui-selected")){
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
}
else {
selected = $([]);
$("#canvas > div").removeClass("ui-selected");
}
offset = $(this).offset();
},
drag: function(ev, ui) {
$(currentElement).removeClass("selectedEffect");
$(currentArrow).removeClass("selectedArrow");
var dt = ui.style.top - offset.top, dl = ui.style.left - offset.left;
// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
// create the variable for we don't need to keep calling $("this")
// el = current element we are on
// off = what position was this element at when it was selected, before drag
var el = $(this), off = el.data("offset");
el.css({top: off.top + dt, left: off.left + dl});
});
}
});
$( "#canvas" ).selectable();
// manually trigger the "select" of clicked elements
$( "#canvas > div" ).click( function(e){
if (e.metaKey == false) {
// if command key is pressed don't deselect existing elements
$( "#canvas > div" ).removeClass("ui-selected");
$(this).addClass("ui-selecting");
}
else {
if ($(this).hasClass("ui-selected")) {
// remove selected class from element if already selected
$(this).removeClass("ui-selected");
}
else {
// add selecting class if not
$(this).addClass("ui-selecting");
}
}
$( "#canvas" ).data("canvas")._mouseStop(null);
});
但是,实现这个功能后,我仍然有一些错误:
- 无法同时拖动多个选定的对象
- 如果我单击一个元素然后单击 Canvas (以取消选择它),“selectedEffect”不会消失。
最佳答案
我刚刚想通了。问题是,由于我要向 Canvas 动态添加元素,所以我必须在创建时将以下函数绑定(bind)到我的可拖动元素:
$( "#myNewlyCreatedElement" ).draggable({
start: function (event, ui) {
if ($this.hasClass("ui-selected")) {
// if this is selected, attach current offset
// of each selected element to that element
selected = $(".ui-selected").each(function() {
var el = $(this);
el.data("offset", el.offset());
});
} else {
// if this is not selected, clear current selection
selected = $([]);
$( "#canvas > div" ).removeClass("ui-selected");
}
offset = $this.offset();
},
drag: function (event, ui) {
// drag all selected elements simultaneously
var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
selected.not(this).each(function() {
var $this = $(this);
var elOffset = $this.data("offset");
$this.css({top: elOffset.top + dt, left: elOffset.left + dl});
});
}
});
关于javascript - Jquery UI Selectable - 选择多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30814356/