2010-05-04 104 views
0

我想附加HTML到一个项目,我已成功拖拽到一个可排序的列表,但它似乎并没有工作。我克隆了原来的项目,并试图追加到ui.helper无济于事。jQuery UI,可拖曳/可排序的追加问题

这是我到目前为止有:

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

我只是想追加某种被拖拽到右侧列表,以便将其发送回的项目“未删除”图标原始列表。似乎无法追加任何东西到拖动/克隆项目,只是原来的,我摆脱了那一个。

关于如何完成此功能的任何想法?我是否应该在右侧列表中选择“可放下”?我希望右侧列表可以排序。

感谢

回答

0

这是我在过去的习惯:

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

只是有<li> S IN #sortable1标有你,一旦他们在#sortable3收到删除一个类。

BTW - 而不是设置#sortable1为可拖动的,为什么不使用connectWith:喜欢这里:http://jqueryui.com/demos/sortable/#connect-lists