Question

我正在构建一个界面，将快捷按钮分配给屏幕上有12个位置的手机。

第一个位置是固定的，最终用户无法更改，剩余的插槽是开放的，用户可以根据需要移动按钮。 12个位置中的每一个都可以分配0或1个用户，因此我有逻辑来防止两个用户被丢弃在同一个插槽中。

我遇到的问题是，如果用户在“已分配”部分中启动，那么将它们拖放到另一个“已分配”插槽时没有问题，但如果我将'已分配'一个移动到'可用'组或尝试将在“可用”组中启动的组移动到“已分配”插槽，它不会让我放弃用户。

我目前使用的设置如下，为简洁起见，简化了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>

Answer 1

据我所知，这个问题没有记载，因为放在容器中的物体尺寸必须小于容器;这意味着我在“可用”容器中的li s比“Assigned”插槽宽，但是不能放在那里，但是已经在“Assigned”插槽中的任何东西都是正确的宽度，所以可以被移到任何一个地方。

jQuery droppable不允许从某个原始容器中删除

1 个答案: