0

嘿，很棒的问题解决者，这是我需要帮助的问题：

我有多个列表，我使用 JQuery Sortable 进行排序，然后输出更改列表的对象。我需要帮助的一项功能是从一个列表复制到另一个列表。这会将原始元素保留在其列表中，然后将克隆元素放入新列表中，并将其删除。

走到那一步并不是什么大问题。但是当我为输出创建对象时，它很少与我们在屏幕上看到的内容相匹配。列表项的顺序不正确，有时克隆的列表项会有额外的副本。

这是 JS 小提琴：

<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;}
4

1 回答 1

0

我能够在下一个小提琴中解决这个问题：http: //jsfiddle.net/yYKmw/7/

基本上，底部的可排序绑定功能允许将移位拖动项目正确放置到新列表中。（这个解决方案是在我目前找不到的另一个 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');
    });
于 2013-10-17T18:02:00.333 回答