Question

我正在使用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，而不是我加载页面时那里的元素。

Answer 1

我根据您的代码进行了快速实验。我可以从下面拖动元素并将它们添加到第一个序列。然后单击clicky按钮时可以访问它们。

  <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div id="moo">clicky</div>

<ul class="sortable connectedSortable ui-sortable">
    <h3 data-sequence-title="sequence1">Sequence 1</h3>
    <li data-screen="s1screen1">Seq 1 Screen 1</li>
    <li data-screen="s1screen2">Seq 1 Screen 2</li>
    <li data-screen="s1screen3">Seq 1 Screen 3</li>
</ul>



<ul class="draggable">
    <h3 data-sequence-title="sequence2">Dragable Sequence (Drag these elements up and assign to sequence 1)</h3>
    <li data-screen="s2screen1">Seq 2 Screen 1</li>
    <li data-screen="s2screen2">Seq 2 Screen 2</li>
    <li data-screen="s2screen3">Seq 2 Screen 3</li>
</ul>


<script>
$(document.getElementById('moo')).on('click', function(){

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

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

        $(this).siblings("li").each(function() {
          obj.Screens.push({
              image: $(this).data("screen")
          });
        });

        jsonObj.push(obj);
    });

    alert(JSON.stringify(jsonObj));
});

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

</script>

</body>
</html>

Answer 2

在您的sortable中添加元素后，您必须更新组件：

$(".sortable").sortable("refresh");

访问新创建的DOM元素以进行循环

2 个答案: