2010-05-04 92 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