jQuery droppable不允許從某個源容器中丟棄

我正在構建一個界面，將快捷按鈕分配給具有12個位置的手機。jQuery droppable不允許從某個源容器中丟棄

第一個位置是固定的，不能由最終用戶進行更改，剩餘的插槽可以讓用戶隨意移動按鈕。 12個位置中的每一個都可以分配0或1個用戶，所以我已經有邏輯來防止兩個用戶被放入同一個插槽。

我遇到的問題是，如果用戶在'Assigned'部分啓動，那麼將它們拖放到另一個'Assigned'插槽沒有問題，但是如果我將'Assigned'一個移動到'可用'羣組或嘗試將'可用'羣組中啓動的羣組移動到'已分配'羣組，但不會讓我放棄該用戶。

我目前使用的設置如下，爲簡明起見，使用簡化的HTML。有關我所嘗試的完整示例，請檢查this JSFiddle。

<div id="centrex_users_devices_buttons_edit"> 
    <h4>Available Users</h4> 
    <ul> 
      <li data-user-id="23">Widget Co Main</li> 
      <li data-user-id="32">Initech Main</li> 
      <li data-user-id="410">0064123456789</li> 
    </ul> 

    <h4>Assigned Users</h4> 
    <ul class="draggable-placeholders"> 
     <li class="placeholder"> 
     <span class="placeholder-pos">1</span> 
     <ul class="draggable single-only"> 
      <li class="ui-state-default static_centrex_device_button">Ben Smith</li> 
     </ul> 
     </li> 
     <li class="placeholder"> 
     <span class="placeholder-pos">2</span> 
     <ul class="draggable single-only"> 
     </ul> 
     </li> 
     <li class="placeholder"> 
     <span class="placeholder-pos">3</span> 
     <ul class="draggable single-only"> 
     </ul> 
     </li> 
    </ul> 
</div> 

<script> 
var outer_id = '#centrex_users_devices_buttons_edit'; 
var outer = $(outer_id); 
$.each(outer.find('.draggable'),function (j, val){ 
    $(val).droppable({ 
     accept: outer_id + ' .draggable li', 
     activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
     drop: function(event,ui){ 
      ui.draggable.addClass('dropped'); 
      ui.draggable.data('droppedin',$(this)); 
      if ($(this).hasClass('single-only')) { 
       $(this).droppable('disable'); 
      } 
      $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); 
     } 
    }).disableSelection(); 
    if ($(val).hasClass('single-only') && $(val).find('li').length) $(val).droppable('disable'); 
    $.each($(val).find('li'), function(){ 
     $(this).data('droppedin',$(val)); 
    }); 
}); 
$(outer_id + ' .draggable li:not(.static_centrex_device_button)').draggable({ 
    revert: 'invalid', 
    drag: function(event,ui){ 
     if($(this).data('droppedin')){ 
      $(this).data('droppedin').droppable('enable'); 
      $(this).data('droppedin',null); 
      $(this).removeClass('dropped'); 
     } 
    } 
}); 
</script>

來源

2015-10-06 bdx

這個問題證明是我能看到的東西是無證的，因爲放入容器的物體的尺寸必須小於容器的尺寸;這意味着我在我的「可用」容器中有比「已分配」插槽更寬的li，但是已經在「已分配」插槽中的任何東西都是正確的寬度，因此可以移動到位置。

來源

2015-10-07 05:41:08 bdx

jQuery droppable不允許從某個源容器中丟棄

回答

相關問題