Jquery可排序和可下垂-不能将项目从1列表克隆到另一列表。

Question

从列表2到列表1，我想克隆元素。

我用的是可排序的和便便的。但是克隆部分是行不通的！

小提琴手：http://jsfiddle.net/46zqm/6/

As you can see cloned part gets stuck in the tab navli.

完整代码：

    // 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");
          });
        }
      }
    });

Answer 1

问题是，克隆的元素保持了从中克隆的掺杂元素的内联位置。

您可以使用removeAttr('style')重置其内联样式。

代码：

// 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");
        });
    }
  }

演示：http://jsfiddle.net/H6pVW/