一次只能選擇一個項目與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

回答

相關問題