jQuery UI，可拖动/可排序追加问题答案

【问题标题】：jQuery UI, draggable / sortable append problemjQuery UI，可拖动/可排序追加问题
【发布时间】：2010-05-04 20:15:14
【问题描述】：

我正在尝试将 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”吗？不过，我希望右侧的列表是可排序的。

谢谢

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-sortable

【解决方案1】：

这是我过去使用的：

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

只需将#sortable1 中的<li>s 标记为您在#sortable3 收到它们后删除的类。

顺便说一句 - 不是将 #sortable1 设置为可拖动，为什么不使用 connectWith: 像这里：http://jqueryui.com/demos/sortable/#connect-lists

【讨论】：