jQuery 可排序,从静态列表中拖拽
jQuery sortable, drag from static list
不太确定解释我正在尝试做的事情的最佳方式,所以我一直在玩它,请参阅:http://bit.ly/1Fm6qgc
我想要一个 'widgets' 的列表,它们基本上都是 li 的 - 现在我希望能够将它们拖到一个可排序的面板中,这是我在上面的示例中工作的,但是,当我放下一个'widget' 到可排序面板中我希望 'widget' 也保留在小部件列表中,以便我可以将小部件的多个实例放入多个可排序面板中。
我希望这是有道理的,如果您对我如何实现这一目标有任何其他想法,我们将不胜感激。
谢谢
我了解你的目标,我已经更新了你的 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.
中所示
不太确定解释我正在尝试做的事情的最佳方式,所以我一直在玩它,请参阅:http://bit.ly/1Fm6qgc
我想要一个 'widgets' 的列表,它们基本上都是 li 的 - 现在我希望能够将它们拖到一个可排序的面板中,这是我在上面的示例中工作的,但是,当我放下一个'widget' 到可排序面板中我希望 'widget' 也保留在小部件列表中,以便我可以将小部件的多个实例放入多个可排序面板中。
我希望这是有道理的,如果您对我如何实现这一目标有任何其他想法,我们将不胜感激。
谢谢
我了解你的目标,我已经更新了你的 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.
中所示