jQuery UI, проблема перетаскиваемого / сортируемого добавления - PullRequest
Новая
       10

jQuery UI, проблема перетаскиваемого / сортируемого добавления

0 голосов
/ 05 мая 2010

Я пытаюсь добавить html к элементу, который я успешно перетащил в сортируемый список, но, похоже, он не работает. Я клонирую оригинальный элемент и пытаюсь добавить его в ui.helper безрезультатно.

Вот что у меня есть: 

<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>

<script type="text/javascript">
    $(function() {
        $("#sortable3").sortable({
            revert: true,
            receive: function(ev, ui) {
                ui.item.append("Tsfsdfg");
                save_object(ui.item);
            }

        });

        $('li',"#sortable1").draggable({
            connectToSortable: '#sortable3',
            helper: 'clone',
            revert: 'invalid',

        });

        function save_object($item) {
            var the_id = $item.attr('id');
            $item.append("This is it");
            $item.slideUp(500,function(){
                $(this).remove();
            });




        }


        $("#sortable1, #sortable3").disableSelection();
    });
    </script>

</head>

<body>

<div class="demo">

<ul id="sortable1">
    <li id="mx-101" class="ui-state-default">Num 1 <img src="images/icon_alert.png" alt="" /> </li>
    <li id="mx-102" class="ui-state-default">Num 2 <img src="images/icon_clock.png" alt="" /></li>
    <li id="mx-103" class="ui-state-default">Num 3 <img src="images/icon_congrats.png" alt="" /></li>
    <li id="mx-104" class="ui-state-default">Num 4 <img src="images/icon_delete.png" alt="" /></li>
    <li id="mx-105" class="ui-state-default">Num 5 <img src="images/icon_add.png" alt="" /></li>
</ul>


<ul id="sortable3">
</ul>

<br clear="both" />

</div><!-- End demo -->



</body>

Я просто хочу добавить какой-нибудь значок «не удалять» на элемент, который перетаскивается в правый список, чтобы я отправил его обратно в исходный список. Не могу добавить что-либо к перетаскиваемому / клонированному предмету, только к оригиналу, и я избавляюсь от этого.

Есть идеи, как реализовать эту функциональность? Должен ли я просто пойти с "сбрасываемым" в списке справа? Я хочу, чтобы этот список справа был сортируемым.

Спасибо

1 Ответ

0 голосов
/ 05 мая 2010

Это то, что я использовал в прошлом: 

 function itemreceived(event, ui) {
    $(this).find("li.ui-state-highlight").removeClass("ui-state-highlight").addClass("ui-state-default");
  };

Просто пометьте <li> s в #sortable1 классом, который вы удаляете после получения в #sortable3.

Кстати - вместо установки #sortable1 для перетаскивания, почему бы не использовать connectWith: как здесь: http://jqueryui.com/demos/sortable/#connect-lists

...