jQuery 可排序，从静态列表中拖拽

Question

不太确定解释我正在尝试做的事情的最佳方式，所以我一直在玩它，请参阅：http://bit.ly/1Fm6qgc

我想要一个 'widgets' 的列表，它们基本上都是 li 的 - 现在我希望能够将它们拖到一个可排序的面板中，这是我在上面的示例中工作的，但是，当我放下一个'widget' 到可排序面板中我希望 'widget' 也保留在小部件列表中，以便我可以将小部件的多个实例放入多个可排序面板中。

我希望这是有道理的，如果您对我如何实现这一目标有任何其他想法，我们将不胜感激。

谢谢

Answer 1

我了解你的目标，我已经更新了你的 fiddle。从语义的角度来看，Reusable Draggable Widgets Panel 应该只是可拖动的小部件，而不是可排序的列表。这是有道理的，因为您通常不希望用户将已经 used/changed 的小部件从他们自己的 Target Widgets Sortable Lists 拖回主 Reusable Draggable Widgets Panel，如新的 fiddle 所示.作为旁注，Reusable Draggable Widgets Panel 确实采用相同的帮助程序："clone" 选项，但需要额外注意，如 SO post 所示，确保原始克隆显示.但正如我之前所说，Reusable Draggable Widgets Panel 只是可拖动元素而不是排序列表更有意义。

这是更新后的工作 fiddle。

快速概述和解释 (js)：

function removeHighlight(){
    // Enable all sortables
    $('.sort').each(function(){
        var $this = $(this);
        $this.css('borderColor','gray');
        $this.sortable('enable');
    });
}

function addHighlight(){
    // Check number of elements already in each sortable
    $('.sort').not(this).each(function(){
        var $this = $(this);
        if($this.find('li:not(.l-header)').length >= 3){
            $this.css('borderColor','red');
            $this.sortable('disable');
        } else {
            $this.css('borderColor','gray');
            $this.sortable('enable');
        }
    });
}
// use both mousedown and mouseup events to handle highlighting
// and enabling/disabling of sort lists.
// Using the stop/start callbacks of sortable/draggable ui plugin
// is unreliable, even after calling list.sortable("resfresh")
$('ul.sort, ul.d-widgets').on("mousedown", addHighlight);
$('ul.sort, ul.d-widgets').on("mouseup", removeHighlight);

$( ".d-widgets li:not(.l-header)" ).draggable({
    connectToSortable: ".sort",
    helper: "clone",
    revert: "invalid"
});
$( "ul.disable-highlight li:not(.l-header)" ).disableSelection();

$('.sort').sortable({
    revert: 'invalid',
    connectWith: '.sort',
    items: '> li:not(.l-header)'
});

html:

<ul class="disable-highlight d-widgets">
    <li class='l-header'>Reusable Draggable Widgets Panel</li>
    <li></li>
    <li></li>
</ul>
<ul class='disable-highlight sort'>
    <li class='l-header'>Target Widgets Sortable Lists</li>
    <li></li>
    <li></li>
</ul>
<ul class='disable-highlight sort'>
    <li class='l-header'>Target Widgets Sortable Lists</li>
    <li></li>
    <li></li>
</ul>
<ul class='disable-highlight sort'>
    <li class='l-header'>Target Widgets Sortable Lists</li>
    <li></li>
    <li></li>
</ul>

css:

.d-widgets, .sort { display:inline-block; margin:5px; border:1px solid grey; vertical-align:top; }

.d-widgets{
 background-color: #81d8d0;   
}
}
ul { min-width:60px; min-height:20px; }
li { width:50px; min-height:15px; margin:5px; border:1px solid silver; cursor:move; background-color:white; }

.l-header{
    cursor:auto;
    width:80px;
    padding:4px;
    border:none;
    border-bottom:1px solid grey;
    font-size:10px;
}

编辑用于销毁小部件：

正如我在评论中所述，从用户体验的角度来看，专门指定用于删除小部件的区域将是一种很好的方法，如我更新的 fiddle.

中所示

jQuery 可排序，从静态列表中拖拽

jQuery sortable, drag from static list

jquery

jquery-ui