JQuery的排序轉變克隆與輸出對象

Question

嘿真棒問題的解決者，這是一個問題，我需要幫助：

我有我使用JQuery可排序與排序多個列表，然後輸出的對象更改列表。我需要幫助的一個功能是從一個列表向另一個列表移動副本。這會將原始文件保留在列表中，然後將該克隆元素放入新列表中，並放在該列表中。

獲得這樣的遠遠不是太多的問題。但是當我創建輸出對象時，它很少與我們在屏幕上看到的內容匹配。列表項目的順序不正確，有時還會有克隆列表項目的額外副本。

Here is the JS Fiddle:

<ul class="sortable" data-name="List 1"> 
    <p>List 1</p> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
    <li class="ui-state-default">Item 6</li> 
    <li class="ui-state-default">Item 7</li> 
</ul> 

<ul class="sortable" data-name="List 2"> 
    <p>List 2</p> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
    <li class="ui-state-default">Item 4</li> 
    <li class="ui-state-default">Item 5</li> 
    <li class="ui-state-default">Item 6</li> 
    <li class="ui-state-default">Item 7</li> 
</ul> 
<p style="clear: both">Output Object</p> 
<div id="output"></div> 

下面是使用Javascript/jQuery的：

$(function() { 
    $(".sortable").sortable({ 

     connectWith: ".sortable", 

      activate: function (event, ui) { 
      if (event.shiftKey == true) { 
      $('body').css('cursor', 'copy'); 
       } 
      }, 

      stop: function(event, ui) { 
      if (event.shiftKey == true) { 
       return false; 
       } 
      }, 

      receive: function(event, ui) { 
      if (event.shiftKey == true) { 
       ui.item.clone().appendTo($(this)); 
       } 
      }, 

      update: function(event, ui) { 
      sendList(ui.item.closest('ul')); 
      }, 


    });<!-- end Jquery Sortable --> 
    });<!-- end function --> 

// function for output 
function sendList(list) { 
     var listArray = []; 
     var ulObject={}; 

    // iterate through the list and push html into array 
     list.find('li').each(function(index, element) { 
      listArray.push($(this).html()); 
     }); 

    // update object 
     ulObject = { 
      "List Name" : list.attr('data-name'), 
      "List Items" : listArray 
     } 

    console.log(ulObject); 
     $('#output').html("").append(JSON.stringify(ulObject, "", "\r\n")); 

    } 

而對於審美的煩躁：CSS的：

.sortable { list-style-type: none; margin: 1em; padding: 0; width: 30%; float: left;} 
.sortable li { margin: 3px; padding: 0.4em; height: 12px; } 
#output {clear:both; border: thin solid black; padding: 1em; margin: 1em; width: 60%; min-height: 250px} 
p {clear:both; margin-left: 1em;} 

Answer 1

我能夠在解決這個next小提琴：http://jsfiddle.net/yYKmw/7/

基本上，底部的可排序綁定函數允許將shift-drag項目正確放置到新列表中。 （這個解決方案發現在另一個stackoverflow帖子，我目前找不到）。

與未使用ui.item.clone（）。appendTo（$（this））結合使用;在可排序的接收方面做了訣竅，但我仍然願意接受其他建議。

$(function() { 
    $(".sortable").sortable({ 

     connectWith: ".sortable", 

      activate: function (event, ui) { 
      if (event.shiftKey == true) { 
      $('body').css('cursor', 'copy'); 
       } 
      }, 

      stop: function(event, ui) { 
      if (event.shiftKey == true) { 
       return false; 
       } 
      }, 

      receive: function(event, ui) { 
      if (event.shiftKey == true) { 
       //ui.item.clone().appendTo($(this)); 
       } 
      }, 

      update: function(event, ui) { 
      sendList($(this).closest('ul')); 
      }, 


    });<!-- end Jquery Sortable --> 
    });<!-- end function --> 


     $('.sortable').bind('sortstop', function(event, ui) { 
      var idx = $('.sortable').children().index($(ui.item[0]))-1, 
       elm = $(ui.item[0]).clone(true); 
    $('.sortable').children(':eq('+idx+')').after(elm); 
      $(this).sortable('cancel'); 
    });