0

首先，对不起我的英语。

我的问题如下：

我有 3 个列表，将 2 拖到列表 1 中，将列表 3 拖到列表 2 中，但是如果我在列表 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>
4

2 回答 2

0

可拖动代码不会针对您添加到 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>
于 2013-10-03T18:36:50.457 回答
0

当你运行这样的代码时：

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

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

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

于 2013-10-03T18:37:10.860 回答