jQuery UI 可排序和可选
Posted
技术标签:
【中文标题】jQuery UI 可排序和可选【英文标题】：jQuery UI sortable & selectable 【发布时间】：2011-03-24 09:03:36 【问题描述】：有人知道如何将 jQuery UI 的 selectable 和 sortable 结合起来吗？ 这个脚本：http://nicolas.rudas.info/jquery/selectables_sortables/ 在 Chrome 中不起作用，它也有插件修改。
【问题讨论】：
我已经完成了，但不是可排序和可选择的，由于一些版权问题我没有给你代码:)，但我会告诉你如何做的说明:) 【参考方案1】：刚刚从 rdworth 找到 this 非常简单的解决方案：
CSS：
ul width: 300px; list-style: none; margin: 0; padding: 0;
li background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px;
li .handle background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px;
.ui-selecting background: #eee;
.ui-selecting .handle background: #ddd;
.ui-selected background: #def;
.ui-selected .handle background: #cde;
html：
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
$( "#list" )
.sortable( handle: ".handle" )
.selectable( filter: "li", cancel: ".handle" )
.find( "li" )
.addClass( "ui-corner-all" )
.prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );
见：thisfiddle。
【讨论】：
这很好用。我必须将这些选项传递给 selectable，以便它不会将句柄视为单独的可选择对象，并且在拖动它们时不会开始选择： filter: 'li', cancel: '.handle'
@Nick：添加了你的建议
@KarlKieninger：它也适用于 jQuery 2.1.1 和 jQuery UI 1.10.4，请参阅 jsfiddle.net/87zjB/1
@mhu：是的，它有效。我错过了使用手柄进行排序。所以我刚刚学到了一些东西。从好的方面来说，现在你的答案有一些可行的方法。谢谢。
好消息！真的有助于回答这个问题：***.com/questions/38221956/…【参考方案2】：
http://jsfiddle.net/t9YTB/
这是我可以给你的 :) 但想法就在那里。它还没有完全完成，但希望你可以玩弄这些价值观，看看它是如何从那里发展起来的:)
【讨论】：
@minnur，说声谢谢很好。投票给答案更好:)【参考方案3】：我的 jQuery 基础库的一部分包括以下内容，因为它通常很烦人当你去拖动一些东西并最终选择文本时......
// disables text selection on sortable, draggable items
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
不确定您是否可以将“禁用”切换为“启用”，但这是我的 $.02。虽然没有尝试..常识表明您可能需要在同一个“组”元素中定义一个非活动部分，为拖动操作提供一个“句柄”......否则这些点击可能会被无情地误认为是意图选择/编辑...
【讨论】：
【参考方案4】：试试这个。您可以使用Ctrl + Click 进行多选和排序
http://jsfiddle.net/r83vrm0q/
【讨论】：
【参考方案5】：如果你想选择多个元素并将它们全部移动到另一个列表，这个fiddle 效果很好：
HTML：
<meta charset="utf-8" />
<title>jQuery UI Sortable with Selectable</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>
<ul id="album" class="connectedSortable">
<li id="li1"><div>1- First</div></li>
<li id="li2"><div>2- Second</div></li>
<li id="li3"><div>3- Third</div></li>
<li id="li4"><div>4- Fourth</div></li>
<li id="li5"><div>5- Fifth</div></li>
<li id="li6"><div>6- Sixth</div></li>
<li id="li7"><div>7- Seventh</div></li>
<li id="li8"><div>8- Eighth</div></li>
</ul>
<ul id="album2" class="connectedSortable">
<li id="li1"><div>1- 1</div></li>
<li id="li2"><div>2- 2</div></li>
<li id="li3"><div>3- 3</div></li>
<li id="li4"><div>4- 4</div></li>
<li id="li5"><div>5- 5</div></li>
<li id="li6"><div>6- 6</div></li>
<li id="li7"><div>7- 7</div></li>
<li id="li8"><div>8- 8</div></li>
</ul>
<div id="anotheralbum" class="connectedSortable">
another album - no style for the lists inside here
</div>
<br style="clear:both">
</body>
Javascript：
<script>
$(function()
//
$('body').selectable(
filter: 'li'
//filter: '#album2 > li'
);
/*
Since the sortable seems unable to move more than one object at a
time, we'll do this:
The LIs should act only as wrappers for DIVs.
When sorting a LI, move all the DIVs that are children of selected
LIs to inside the sorting LI (this will make them move together);
but before doing that, save inside the DIVs a reference to their
respective original parents, so we can restore them later.
When the user drop the sorting, restore the DIVs to their original
parent LIs and place those LIs right after the just-dropped LI.
Voilá!
Tip: doesn't work so great if you try to stick the LIs inside the LI
*/
$('.connectedSortable').sortable(
connectWith: ".connectedSortable",
delay: 100,
start: function(e, ui)
var topleft = 0;
// if the current sorting LI is not selected, select
$(ui.item).addClass('ui-selected');
$('.ui-selected div').each(function()
// save reference to original parent
var originalParent = $(this).parent()[0];
$(this).data('origin', originalParent);
// position each DIV in cascade
$(this).css('position', 'absolute');
$(this).css('top', topleft);
$(this).css('left', topleft);
topleft += 20;
).appendTo(ui.item); // glue them all inside current sorting LI
,
stop: function(e, ui)
$(ui.item).children().each(function()
// restore all the DIVs in the sorting LI to their original parents
var originalParent = $(this).data('origin');
$(this).appendTo(originalParent);
// remove the cascade positioning
$(this).css('position', '');
$(this).css('top', '');
$(this).css('left', '');
);
// put the selected LIs after the just-dropped sorting LI
$('#album .ui-selected').insertAfter(ui.item);
// put the selected LIs after the just-dropped sorting LI
$('#album2 .ui-selected').insertAfter(ui.item);
);
//
);
</script>
CSS：
<style>
*,
*:before,
*:after
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
#album
list-style: none;
float: left;
width: 20%;
border: 1px solid red;
#album2
list-style: none;
float: left;
width: 20%;
border: 1px solid red;
#album li
float: left;
margin: 5px;
#album2 li
float: left;
margin: 5px;
#album div
width: 100px;
height: 100px;
border: 1px solid #CCC;
background: #F6F6F6;
#album2 div
width: 100px;
height: 100px;
border: 1px solid #CCC;
background: #F6F6F6;
#album .ui-sortable-placeholder
border: 1px dashed #CCC;
width: 100px;
height: 100px;
background: none;
visibility: visible !important;
#album2 .ui-sortable-placeholder
border: 1px dashed #CCC;
width: 100px;
height: 100px;
background: none;
visibility: visible !important;
#album .ui-selecting div,
#album .ui-selected div
background-color: #3C6;
#album2 .ui-selecting div,
#album2 .ui-selected div
background-color: #3C6;
#anotheralbum
list-style: none;
float: left;
width: 20%;
height: 800px;
border: 1px solid blue;
</style>
感谢 Piero Mori，这是从 http://www.pieromori.com.br/snippets/sortable_with_selectable.html 的示例修改而来的。
【讨论】：
以上是关于jQuery UI 可排序和可选的主要内容，如果未能解决你的问题，请参考以下文章