Question

不确定解释我要做什么的最好方法，所以我一直在玩它，请参阅：http://bit.ly/1Fm6qgc

我想要一个＆＃39;小部件列表＆＃39;这基本上是我的 - 现在我希望能够将它们拖动到一个可排序的面板中，我在上面的例子中工作，但是，当我放弃一个小部件时。进入一个可排序的面板，我想要的小部件＆＃39;保留在小部件列表中，以便我可以将多个小部件实例放入多个可排序的面板中。

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

由于

Answer 1

我理解你的目标，而且我已经更新了你的小提琴。从语义角度来看，Reusable Draggable Widgets Panel应该只是可拖动的小部件，而不是可排序的小部件。这是有道理的，因为您通常不希望用户将已使用/已更改的小部件从他们自己的Target Widgets Sortable Lists拖回到主Reusable Draggable Widgets Panel中，如新小提琴所示。作为旁注，Reusable Draggable Widgets Panel确实采用相同的帮助：“克隆”选项，但需要额外注意，如此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;
}

用于销毁小部件的

编辑：

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

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

1 个答案: