一次只能选择一个项目与jQuery UI可拖动和droppable

我试图创建一个用户界面，它将有可能将项目拖放到项目将留在该框中。但是，如果用户决定将另一个项目拖放到同一个框中，那么新项目将取代旧项目，旧项目将恢复到<ul>列表。一次只能选择一个项目与jQuery UI可拖动和droppable

到目前为止，我得到了它所有的工作只是我希望它的方式，但有其中恢复<li>项目都不能拖动任何就越附加回<ul>列表

的HTML看起来像后的问题这（它有它的一些Smarty的代码，但是我觉得你得到的图片）：

<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嗨，mateys：

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

任何想法，绅士？

来源

2011-11-06 Valhallen

我遇到过类似的情况，我只是复制拖放事件中的可拖动赋值及其工作。所以我认为你可以尝试这样做：

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

作为一个函数，然后在u追加li后再调用它。

希望得到这个帮助！

来源

2011-11-07 01:01:39 shennyL

谢谢，我正在寻找这样的东西，但我恢复了上述海报的想法，这是我一直想要的 – Valhallen

我希望我可以选择这些答案作为接受的，我最终使用它们两个 – Valhallen

这个问题似乎是您在拖动替换时创建新的li标签，并且新标签上没有任何绑定。它也似乎是你在放下它后隐藏李，所以我的建议是显示旧李而不是创建一个新李。绑定仍然存在于隐藏列表项目中。

来源

2011-11-07 00:58:58

是的，我也这么想过。似乎是最好的方式。 – Valhallen

一次只能选择一个项目与jQuery UI可拖动和droppable

回答

相关问题