2

jQuery sortable + jQuery draggable を使用して、スライドショーに画像を追加および削除するページをまとめています。新しい画面をドラッグして、必要な名前付きシーケンスにドロップできるように設定しました。必要な DOM 要素が作成されます。

必要な要素のページを正常にスキャンして配列にコミットしていますが、新しく追加されたアイテムを取得することはありません。たとえば、最初に次の要素があります。

<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
    <li data-screen="screen1">Screen 1</li>
    <li data-screen="screen2">Screen 2</li>
    <li data-screen="screen3">Screen 3</li>
</ul>

...そして、行を追加します。

<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
    <li data-screen="screen1">Screen 1</li>
    <li data-screen="screen2">Screen 2</li>
    <li data-screen="screen3">Screen 3</li>
    <li data-screen="screen4">Screen 4</li>
</ul>

jQuery は、更新された要素ではなく、最初の要素のみを返します。使用しているjsは次のとおりです。

$( document.body ).on('click', '.submit', function(){

    // Build nested array from DOM elements
    var jsonObj = [];    

    $('.sortable').prev('h3').each(function(){
        var obj = {
            title: $(this).data("sequence-title"),
            Screens: []
        };

        $(this).next("ul").children('li').each(function() {
          obj.Screens.push({
              image: $(this).data("screen")
          });
        });

        jsonObj.push(obj);
    });

});

新しい LI を追加するコード:

// Initialize draggable / droppable functionality
$('.sortable').sortable({
    placeholder: 'ui-state-highlight',
    revert: true
});
$('.draggable li').draggable({
    connectToSortable: '.sortable',
    helper: 'clone',
    revert: 'invalid'
});
$('.sortable').disableSelection();

ページを読み込んだときにそこにあった要素ではなく、変更された DOM を返す必要があります。

4

2 に答える 2

0

sortable に要素を追加したら、コンポーネントを更新する必要があります。

$(".sortable").sortable("refresh");
于 2013-05-21T16:45:02.190 に答える