我有两个连接的可排序,在这些工作之间拖动很好。我需要一次拖动多个,所以我使用以下方法,将所选项目附加到event.item。
$(this).sortable({
connectWith: ".stage-content",
placeholder: 'placeholder',
start: function(ui, e) {
e.item.siblings(".selected").appendTo(e.item);
....
我无法弄清楚的问题,当没有悬停在两个拖放区域中的一个上时,占位符最终会在我拖动的元素中。如果你现在放手,它们会消失。
HierarchyRequestError:无法在层次结构中的指定点插入节点
这很有道理,但我不知道解决方案是什么,感谢任何帮助!
答案 0 :(得分:1)
在底部是jsfiddle的例子。希望这会有所帮助。
$(document).ready(function(){
$(".droppable").droppable({
drop: function(event, ui) {
var $list = $(this);
$helper = ui.helper;
$($helper).removeClass("selected");
var $selected = $(".selected");
if($selected.length > 1){
moveSelected($list,$selected);
}else{
moveItem(ui.draggable,$list);
}
}, tolerance: "touch"
});
$(".draggable").draggable({
revert: "invalid",
helper: "clone",
cursor: "move",
drag: function(event,ui){
var $helper = ui.helper;
$($helper).removeClass("selected");
var $selected = $(".selected");
if($selected.length > 1){
$($helper).html($selected.length + " items");
}
}
});
function moveSelected($list,$selected){
$($selected).each(function(){
$(this).fadeOut(function(){
$(this).appendTo($list).removeClass("selected").fadeIn();
});
});
}
function moveItem( $item,$list ) {
$item.fadeOut(function() {
$item.find(".item").remove();
$item.appendTo( $list ).fadeIn();
});
}
$(".item").click(function(){
$(this).toggleClass("selected");
});
});
答案 1 :(得分:0)
您应该在启动功能中添加$(YOUR SORTABLE OBJECT).sortable( "refresh" )
。
$(this).sortable({
connectWith: ".stage-content",
placeholder: 'placeholder',
start: function(ui, e) {
e.item.siblings(".selected").appendTo(e.item);
$(YOUR SORTABLE OBJECT).sortable( "refresh" );}
...