Question

我正在尝试将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>

我只想在拖动到右侧列表的项目上添加某种“取消删除”图标，以便将其发送回原始列表。似乎无法将任何东西附加到拖动/克隆的项目，只是原始的，我正在摆脱那个。

有关如何完成此功能的任何想法？我应该在右侧列表中使用“droppable”吗？我希望右侧列表可以排序。

由于

Answer 1

这是我过去使用过的：

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

只需让<li>中的#sortable1标记为您在#sortable3收到后删除的课程。

BTW - 为什么不像#sortable1这样使用connectWith:，而不是将{{1}}设置为可拖动：http://jqueryui.com/demos/sortable/#connect-lists

jQuery UI，draggable / sortable追加问题

1 个答案: