Question

Hey awesome problem solvers，这是我需要帮助的问题：

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

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

<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

我能够在下一个小提琴中解决这个问题：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');
    });

带有输出对象的JQuery可排序的shift-clone

1 个答案: