sélectionnez un seul article à la fois avec jquery ui draggable et droppable

Question

J'essaie de créer une interface utilisateur où il serait possible de faire glisser et déposer un élément dans une boîte où l'élément resterait. Mais si l'utilisateur décide de glisser et déposer un autre élément dans cette même boîte, alors le nouvel élément remplacera l'ancien et l'ancien reviendra à la liste <ul>.

Jusqu'à présent, j'ai tout travailler exactement comme je le veux, mais il y a un problème où les rétrocédés <li> éléments ne sont pas draggable plus après sont ajoutées Retour à la liste <ul>

Le code HTML ressemble ce (il a un code Smarty dedans, mais je pense que vous obtenez l'image):

<div id="droppable_tag"> 
    <!-- drop stuff here and the display the item name --> 
</div> 

<!-- ye olde list o' tags --> 
<ul id="draggable_tags"> 
    {foreach $tags_arr as $tag} 
    {if $tag.tagid neq $current_tagid} 
    <li style="cursor:move;" id="tagid_{$tag.tagid}">{$tag.tag}</li> 
    {/if} 
    {/foreach} 
</ul> 

<!-- display the tag id in this field --> 
<input type="text" name="news_tagid" id="news_tagid" value="" /> 

javascript Ahoy, moussaillons:

<script> 
$(document).ready(function(){ 
    $('#draggable_tags>li').draggable({ 
     cursor: 'move' 
     ,revert: 'invalid' 
     ,stack: '#droppable_tag' 
     ,revert: true 
     //,containment: '#forum_post_form' 
    }); 

    $('#droppable_tag').droppable({ 
     tolerance: 'pointer' 
     ,drop: function(event,ui) 
     { 
      // check if we have any tag id currently 
      current_tagid = $('#news_tagid').val(); 
      if(current_tagid == '' || current_tagid == 'undefined') 
      { 
       tagid = ui.draggable.attr('id').substring(6); 
       tag_title = $('#tagid_'+tagid).text(); 
       $('#tagid_'+tagid).hide(); 
       $('#news_tagid').val(tagid); 
       $('#droppable_tag').text(tag_title); 
      } 
      else 
      { 
       current_tag_title = $('#droppable_tag').text(); 
       current_tag_title = $.trim(current_tag_title); 
       $('#droppable_tag').text(''); 
       $('#news_tagid').val(''); 
       //$('#draggable_tags').append('<li style="cursor:move;" id="tagid_'+current_tagid+'">'+current_tag_title+'</li>'); 
       $('<li style="cursor:move;" id="tagid_'+current_tagid+'">'+current_tag_title+'</li>').appendTo('#draggable_tags'); 

       tagid = ui.draggable.attr('id').substring(6); 
       tag_title = $('#tagid_'+tagid).text(); 
       $('#tagid_'+tagid).hide(); 
       $('#news_tagid').val(tagid); 
       $('#droppable_tag').text(tag_title); 
      } 
     } 
    }); 
}); 
</script> 

des idées, messieurs?

Answer 1

J'ai rencontré une situation similaire auparavant, et je viens de dupliquer l'assignation draggable dans l'événement drop, et son travail. Donc, je pense que vous pouvez essayer de mettre ceci:

function makeDraggable(){  
    $('#draggable_tags>li').draggable({ 
    cursor: 'move' 
    ,revert: 'invalid' 
    ,stack: '#droppable_tag' 
    ,revert: true 
    //,containment: '#forum_post_form' 
}); 
} 

En fonction, puis l'appelle à nouveau après u la li append.

Espérons que cette aide!

Answer 2

Le problème semble être que vous créez de nouvelles étiquettes li lorsque vous faites glisser un remplacement et que cette nouvelle étiquette ne contient aucune liaison. Il semble aussi que vous cachez simplement le li après l'avoir laissé tomber alors ma suggestion serait de montrer le vieux li plutôt que d'en créer un nouveau. Les liaisons existeront toujours sur l'élément de liste masqué.