Question

当我使用drag-drop ui和.append（）

时，我遇到了问题

的javascript：

$(document).ready(function() {

    $('#showdata').click(function() {
        $.getJSON('showdata.php', function(data) {

            $('#show').append('<ul>'
                    + '<li><span class="droppable">'
                    + data['drop']+'</span></li>'
                    + '<li><span class="draggable">'
                    + data['drag']+'</span></li>'
                    + '</ul>');
        });

    });

    $('.draggable').draggable({
        revert: 'invalid'
    });

    $('.droppable').droppable({
        drop: function(event, ui) {

            alert($(this).attr('rel') + ' : ' + ui.draggable.text());

        }
    });

});

html：

<input type="button" id="showdata" value="Show Data" />
<div id="show">
    <ul>
        <li>Drop</li>
        <li>Drag</li>
    </ul>
</div>

结果：它不能拖放。

我不知道，问题可能来自.append（）。

例如：如果我直接创建HTML代码

<input type="button" id="showdata" value="Show Data" />,

在javascript中，我可以这样做：

$('#showdata').click(function(){ ... });

但是，如果我使用.append()创建它 .append（ ''），

我必须这样做：

$('#showdata').live('click', function(){ ... });

点击。

谁能帮助我吗？谢谢

Answer 1

当您制作可拖动或可放置的内容时，这仅适用于页面上当前的内容。尝试在每次ajax调用后使元素可拖动/可拖放，如下所示：

$(document).ready(function() {

    $('#showdata').click(function() {
        $.getJSON('showdata.php', function(data) {

            var list = $('<ul></ul>');
            var li1 = $('<li><span>' + data['drop'] + '</span></li>');
            var li2 = $('<li><span>' + data['drag'] + '</span></li>');

            li2.draggable({
                revert: 'invalid'
            });

            li1.droppable({
                drop: function(event, ui) {
                    alert($(this).attr('rel') + ' : ' + ui.draggable.text());
                }
            });

            list.append(li1).append(li2).appendTo('#show');

        });

    });

});

使用拖放jquery ui和.append（）

1 个答案: