Question

带有连接可排序列表的HTML5可排序（http://farhadi.ir/projects/html5sortable/）代码基于将右侧列表中的项目拖放到左侧列表中的 li ;在它之上或之下。

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

example

Answer 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();
         }    
    })
;

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

HTML5可排序：只能向右拖放

1 个答案: