Question

首先，对不起我的英语。

我的问题如下：

我有3个列表，并且拖动到列表1为2，列表2为列表3，但如果我在列表中添加项目1动态，我无法拖动，这里是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pedidos</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}

li {
margin: 5px;
padding: 5px;
width: 150px;
}
</style>
<script>
$(function() {
    $("#cozinha li, #garcom li").draggable({
        revert : "invalid",
        containment : "document",
        helper : "clone",
        cursor : "crosshair"
    });
    $("#garcom ol").droppable({
        activeClass : "ui-state-default",
        hoverClass : "ui-state-hover",
        accept : "#cozinha li",
        greedy : true,
        drop : function(event, ui) {
            $(this).find(".placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this);
            ui.draggable.remove();
        }
    }).sortable({
        items : "li:not(.placeholder)",
        sort : function() {
            $(this).removeClass("ui-state-default");
        }
    });
    $("#caixa ol").droppable({
        activeClass : "ui-state-default",
        hoverClass : "ui-state-hover",
        accept : "#garcom li",
        greedy : true,
        drop : function(event, ui) {
            $(this).find(".placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this);
            ui.draggable.remove();
        }
    }).sortable({
        items : "li:not(.placeholder)",
        sort : function() {
            $(this).removeClass("ui-state-default");
        }
    });
});
</script>

<script type="text/javascript">
jQuery(function($) {
    setInterval(function() {
        $.getJSON('pedidos', function(events) {
            for ( var i in events) {
                $('#cozinha ol').append(
                        '<li class="ui-state-highlight">' + events[i]
                                + '</li>');
            }
        });
    }, 6000);
});
</script>
</head>
<body>
<div id="cozinha">
    <ol style="float: left; width: 30%">
        <li class="ui-state-highlight">Col3 1</li>
        <li class="ui-state-highlight">Col3 2</li>
        <li class="ui-state-highlight">Col3 3</li>
        <li class="ui-state-highlight">Col3 4</li>
        <li class="ui-state-highlight">Col3 5</li>
    </ol>
</div>
<div id="garcom">
    <ol style="float: left; width: 30%">
        <li class="placeholder">Adicione Aqui</li>
    </ol>
</div>
<div id="caixa">
    <ol style="float: left; width: 30%" class="sortable-class">
        <li class="placeholder">Adicione Aqui</li>
    </ol>
</div>
</body>
</html>

Answer 1

可拖动代码未针对您添加到DOM的新元素进行初始化 - 您还必须初始化它们。这是快速做到这一点的一种方法：

创建一个初始化拖放可排序元素的函数。插入新元素后，您需要重新运行该功能。

Working jsFiddle here

请注意，我还在<ol>元素中添加了ID，以便更容易选择。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pedidos</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;
}

li {
margin: 5px;
padding: 5px;
width: 150px;
}
</style>
<script>
$(function() {
    $('#mybutt').click(function() {
        $('#bonk').append('<li class="ui-state-highlight">Col3 6</li>');
        dragdropinit();
    });
    dragdropinit();
}); //END document.ready
function dragdropinit() {
    $("#cozinha li, #garcom li").draggable({
        revert : "invalid",
        containment : "document",
        helper : "clone",
        cursor : "crosshair"
    });
    $("#garcom ol").droppable({
        activeClass : "ui-state-default",
        hoverClass : "ui-state-hover",
        accept : "#cozinha li",
        greedy : true,
        drop : function(event, ui) {
            $(this).find(".placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this);
            ui.draggable.remove();
        }
    }).sortable({
        items : "li:not(.placeholder)",
        sort : function() {
            $(this).removeClass("ui-state-default");
        }
    });
    $("#caixa ol").droppable({
        activeClass : "ui-state-default",
        hoverClass : "ui-state-hover",
        accept : "#garcom li",
        greedy : true,
        drop : function(event, ui) {
            $(this).find(".placeholder").remove();
            $("<li></li>").text(ui.draggable.text()).appendTo(this);
            ui.draggable.remove();
        }
    }).sortable({
        items : "li:not(.placeholder)",
        sort : function() {
            $(this).removeClass("ui-state-default");
        }
    });
}
</script>

<script type="text/javascript">
jQuery(function($) {
    setInterval(function() {
        $.getJSON('pedidos', function(events) {
            for ( var i in events) {
                $('#cozinha ol').append(
                        '<li class="ui-state-highlight">' + events[i]
                                + '</li>');
            }
        });
    }, 6000);
});
</script>
</head>
<body>
<div id="cozinha">
    <ol id="bonk" style="float: left; width: 30%">
        <li class="ui-state-highlight">Col3 1</li>
        <li class="ui-state-highlight">Col3 2</li>
        <li class="ui-state-highlight">Col3 3</li>
        <li class="ui-state-highlight">Col3 4</li>
        <li class="ui-state-highlight">Col3 5</li>
    </ol>
</div>
<div id="garcom">
    <ol style="float: left; width: 30%">
        <li class="placeholder">Adicione Aqui</li>
    </ol>
</div>
<div id="caixa">
    <ol style="float: left; width: 30%" class="sortable-class">
        <li class="placeholder">Adicione Aqui</li>
    </ol>
</div>
<input id="mybutt" type="button" value="Add new col">
</body>
</html>

Answer 2

当你运行这样的代码时：

$("#cozinha li, #garcom li").draggable({
        revert : "invalid",
        containment : "document",
        helper : "clone",
        cursor : "crosshair"
    });

jQuery将在id为#cozinha和#garcom的元素下找到所有li元素。然后jQuery将向这些元素添加事件并使它们可拖动。然后它完成了。因此，如果在运行此代码后添加新元素，它们将不会受到影响。

解决方案是在添加乳清后使新元素可拖动。

插入可拖动的动态

2 个答案: