[英]Jquery ui sortable and droppable - cannot clone item from 1 list to the other
Going from list #2 to list #1 I'd like to clone elements. 从列表2到列表1,我想克隆元素。
I'm using sortable and droppable. 我正在使用sortable和droppable。 But cloning part never works!
但是克隆部分永远行不通!
jsfiddle: http://jsfiddle.net/46zqm/6/ jsfiddle: http : //jsfiddle.net/46zqm/6/
As you can see cloned part gets stuck in the tab navli.
Full code: 完整代码:
// Initiate jquery ui sortable
$(".word-list").sortable({
tolerance: 'pointer',
cursor: 'move',
forcePlaceholderSize: true,
dropOnEmpty: true,
connectWith: 'ol.word-list',
placeholder: "ui-state-highlight"
}).disableSelection();
// Words tabs
var $tabs = $("#tabs").tabs({active: 1});
// Make tab names dropable
var $tab_items = $("#tabs-nav li", $tabs).droppable({
accept: ".word-list li",
hoverClass: "ui-state-hover",
tolerance: 'pointer',
drop: function(event,ui) {
// Deduce source and target
var source = $(ui.draggable[0]).parent().attr("id").split("-")[1];
var target = $(event.target).children("a").attr("href").split("-")[1];
// 1 = Top words, 2 = All words, 3 = Deleted
console.dir("source:" + source);
console.dir("target:" + target);
// If droped on self, do nothing
if (source == target) {return false;}
//
var $item = $(this);
var $list = $($item.find("a").attr("href"));
if (source == 2 && target == 1) {
$tabs.tabs("option", "active", $tab_items.index($item));
ui.draggable.clone().appendTo($list);
} else {
ui.draggable.hide("fast", function() {
$tabs.tabs("option", "active", $tab_items.index($item));
$(this).appendTo($list).show("slow");
});
}
}
});
The problem is that the cloned element mantains the inline position of the dopped element cloned from. 问题是克隆的元素保留了从中克隆的掺杂元素的内联位置。
You can reset its inline styles using removeAttr('style')
. 您可以使用
removeAttr('style')
重置其内联样式。
Code: 码:
// Make tab names dropable
var $tab_items = $("#tabs-nav li", $tabs).droppable({
accept: ".word-list li",
hoverClass: "ui-state-hover",
tolerance: 'pointer',
drop: function(event,ui) {
// Deduce source and target
var source = $(ui.draggable[0]).parent().attr("id").split("-")[1];
var target = $(event.target).children("a").attr("href").split("-")[1];
// 1 = Top words, 2 = All words, 3 = Deleted
// If droped on self, do nothing
if (source == target) {return false;}
//
var $item = $(this);
var $list = $($item.find("a").attr("href"));
var $dragged=ui.draggable.clone().removeAttr('style');
if (source == 2 && target == 1) {
$tabs.tabs("option", "active", $tab_items.index($item));
$dragged.appendTo($list);
} else {
ui.draggable.hide("fast", function() {
$tabs.tabs("option", "active", $tab_items.index($item));
$(this).appendTo($list).show("slow");
});
}
}
Demo: http://jsfiddle.net/H6pVW/ 演示: http : //jsfiddle.net/H6pVW/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.