0

すばらしい問題解決者の皆さん、助けが必要な問題は次のとおりです。

JQuery Sortable を使用して並べ替えている複数のリストがあり、変更されたリストのオブジェクトを出力します。助けが必要な機能の 1 つは、あるリストから別のリストへのシフト コピーです。これにより、元の要素がリストに保持され、クローン要素がドロップされた新しいリストに配置されます。

そこまで行くのはそれほど問題ではありませんでした。しかし、出力用のオブジェクトを作成すると、画面に視覚的に表示されるものと一致することはほとんどありません。リスト アイテムの順序が正しくなく、複製されたリスト アイテムの余分なコピーが存在する場合があります。

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/

基本的に、下部にあるソート可能なバインド機能により、Shift キーを押しながらドラッグした項目を新しいリストに適切に配置できます。(この解決策は、現時点では見つけられない別のスタックオーバーフローの投稿で見つかりました)。

それは 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 に答える