Вставить перетаскиваемый динамический

Question

Вставить перетаскиваемый динамический

0

Во-первых, извините за мой английский.

Моя проблема заключается в следующем:

У меня есть 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>

Vinícius Dias Saraiva 03 окт. 2013, в 21:03

Источник

0

Как вы добавляете предметы в список 1? Где код?
cssyphus 03 окт. 2013, в 18:28
0

В последнем сценарии.
Vinícius Dias Saraiva 03 окт. 2013, в 19:44

Теги:

jquery

2 ответа

0

Когда вы запускаете код следующим образом:

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

jQuery найдет все li-элементы под элементом с id #cozinha и #garcom. Затем jQuery добавит события к этим элементам и сделает их перетаскиваемыми. Тогда это было сделано. Поэтому, если вы добавите новые элементы после запуска этого кода, они не будут затронуты.

Решение состоит в том, чтобы сделать новый элемент перетаскиваемым также после добавления сыворотки.

user1320635 03 окт. 2013, в 15:51

0

Понял, спасибо.
Vinícius Dias Saraiva 03 окт. 2013, в 19:02

Ещё вопросы

Как вы добавляете предметы в список 1? Где код?

gibberish · Accepted Answer · 2013-10-03T16-26-00.000Z

Перетаскиваемый код не инициализируется в отношении новых элементов, которые вы добавляете в DOM, вы также должны инициализировать их. Вот один из способов сделать это быстро:

Создайте функцию, в которой вы инициализируете элементы сортировки с перетаскиванием. После вставки нового элемента вам нужно будет повторно запустить эту функцию.

Working jsFiddle here

Обратите внимание, что я также добавил идентификатор элемента <ol> чтобы упростить его выбор.

Пример кода:

<!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>

Спасибо, именно то, что было нужно !!!