HTML5 可排序：更改为仅右侧拖放答案

【问题标题】：HTML5 Sortable: change into drag and drop only rightHTML5 可排序：更改为仅右侧拖放
【发布时间】：2014-05-19 11:05:47
【问题描述】：

HTML5 sortable (http://farhadi.ir/projects/html5sortable/) with Connected Sortable Lists的代码是基于将右侧列表的一项拖放到左侧列表的li；在它之上或之下。

有没有办法在左侧定义5个槽，用户也可以拖放它们，所以只有右侧的5个元素是可拖放的？

【问题讨论】：

标签： html jquery-ui-sortable

【解决方案1】：

试试这个jsFiddle

您可以将项目从左侧拖到右侧的插槽中。您可以从插槽中更改项目，如果您单击它，它会在左侧返回它的来源。

这并不完美，它可能需要升级以满足您的需求，但您有办法做到这一点......

HTML：

<ul class="right">
    <li draggable="true" class="slot">Slot1</li>
    <li draggable="true" class="slot">Slot2</li>
    <li draggable="true" class="slot">Slot3</li>
    <li draggable="true" class="slot">Slot4</li>
    <li draggable="true" class="slot">Slot5</li>
</ul>

<ul class="left">
    <li draggable="true" class="item">Item1</li>
    <li draggable="true" class="item">Item2</li>
    <li draggable="true" class="item">Item3</li>
    <li draggable="true" class="item">Item4</li>
    <li draggable="true" class="item">Item5</li>
</ul>

JS：

$('.item')
    .each(function(i){ $(this).data('i', i);})
    .on({dragstart:function(e){
            console.log('ITEM : dragstart');
            draggedItem = $(this);
            e.stopImmediatePropagation();
         },
         dragend:function(e){e.preventDefault();},
         dragenter:function(e){e.preventDefault();},
         dragover:function(e){e.preventDefault();},
         dragleave:function(e){e.preventDefault();},
         drop: function(e){e.preventDefault();},
         dblclick:function(e){
             if (1 === $(this).parent('.slot.filled').length) {
                 console.log('ITEM : dblclick');
                 var i = $(this).data('i');
                 var last_before = $('.left > .item')
                                   .filter(function(){
                                       return $(this).data('i') < i; 
                                   })
                                   .last();
                 $(this).parent('.slot').removeClass('filled');
                 if (0 === last_before.length){
                     $('.left').prepend($(this));   
                 } else {
                     last_before.after($(this));   
                 }
             }
             e.preventDefault();
         }
    });
$('.slot') 
    .on({dragstart:function(e){e.preventDefault();},    
         dragend:function(e){e.preventDefault();},    
         dragenter:function(e){e.preventDefault();},    
         dragover:function(e){e.preventDefault()},    
         dragleave:function(e){e.preventDefault();},    
         drop:function(e){
             console.log('SLOT : drop');
             draggedItem.parent('.slot').removeClass('filled');
             $(this).filter(':not(.filled)')
             .append(draggedItem)
             .addClass('filled');

             console.log('item:',draggedItem.data('i'),
                         'slot:', $(this).index('.slot'));

             // write you extras code here

             e.preventDefault();
         }    
    })
;

仅供参考：我选择覆盖所有拖放功能（用于项目和插槽），因为我想击败任何棘手的行为。我不确定这是强制性的，但我没有时间测试每个组合。

【讨论】：