Jquery UI 可选 - 选择多个元素
Jquery UI Selectable - Selecting multiple elements
我正在尝试为我的应用程序中的 select 多个元素实现一个函数,但是由于我是前端开发的新手,所以我在控制 JavaScript 时遇到了一些问题事件和 CSS。我找到了 this post,所以我用它作为我的指南。
在使用 Selectable() 函数之前,我添加了一个 class(带有一些 CSS)来为我的元素提供 selected 的外观(单击时间),如果我想要它被删除select,我只需点击canvas(触发一个函数来删除class "selectedEffect")。
但现在我想要 select 多个元素(将来我希望能够对它们进行分组),所以我开始使用 Selectable() 并且正如我所说,我发现 post ,这对我有部分帮助。我能够将这段代码复制到我的项目中:
// 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);
});
但是,实现了这个功能后,我还是有一些bug:
- 无法同时拖动多个 selected 对象
- 如果我点击一个元素然后点击canvas(去select它),"selectedEffect"不会消失。
我刚刚弄明白了。问题是,因为我正在向我的 canvas 添加动态元素,所以我必须在创建时将以下函数绑定到我的可拖动元素:
$( "#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});
});
}
});
我正在尝试为我的应用程序中的 select 多个元素实现一个函数,但是由于我是前端开发的新手,所以我在控制 JavaScript 时遇到了一些问题事件和 CSS。我找到了 this post,所以我用它作为我的指南。
在使用 Selectable() 函数之前,我添加了一个 class(带有一些 CSS)来为我的元素提供 selected 的外观(单击时间),如果我想要它被删除select,我只需点击canvas(触发一个函数来删除class "selectedEffect")。
但现在我想要 select 多个元素(将来我希望能够对它们进行分组),所以我开始使用 Selectable() 并且正如我所说,我发现 post ,这对我有部分帮助。我能够将这段代码复制到我的项目中:
// 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);
});
但是,实现了这个功能后,我还是有一些bug:
- 无法同时拖动多个 selected 对象
- 如果我点击一个元素然后点击canvas(去select它),"selectedEffect"不会消失。
我刚刚弄明白了。问题是,因为我正在向我的 canvas 添加动态元素,所以我必须在创建时将以下函数绑定到我的可拖动元素:
$( "#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});
});
}
});