2010-05-04 13 views
0

J'essaie d'ajouter html à un élément que j'ai réussi à faire glisser vers une liste triable, mais cela ne semble pas fonctionner. Je suis le clonage de l'élément d'origine et j'ai essayé d'ajouter à l'ui.helper en vain.jQuery UI, draggable/sortable problème d'ajout

Voici ce que j'ai jusqu'à présent:

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

Je veux juste ajouter une sorte de « non-suppression » icône sur l'élément qui est glissé dans la liste de droite pour que je le renvoyer à la liste originale. Impossible de sembler ajouter quoi que ce soit à l'élément déplacé/cloné, juste l'original et je me débarrasse de celui-ci.

Des idées sur la façon d'accomplir cette fonctionnalité? Devrais-je aller avec "droppable" sur la liste de droite? Je veux que cette liste de droite soit triable.

Merci

Répondre

0

C'est ce que je l'ai utilisé dans le passé:

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

Juste ont les <li> s dans #sortable1 marqué avec une classe que vous retirez une fois qu'ils ont été reçus en #sortable3.

BTW - Au lieu de mettre en #sortable1 être draggable pourquoi ne pas utiliser connectWith: comme ici: http://jqueryui.com/demos/sortable/#connect-lists