Пользовательский интерфейс JQuery, сортируемый и выбираемый
Я с трудом комбинирую сортировку jquery и выбор.
У меня есть два списка, и я хочу иметь возможность перетаскивать из одного списка в другой (который работает без выбора)
Но с возможностью выбора, а не перетаскиванием, он просто выбирает снова, есть ли способ отключить выбор на выбранных элементах или поместить ручку перетаскивания снаружи ручки выбора, чтобы они не мешали.
Вот код
$(function() {
$(".available, .assigned").sortable({
connectWith: ".connected",
handle: ".handle"
});
$(".available, .assigned").selectable({ filter: "li", cancel: ".handle" })
$(".available, .assigned").disableSelection();
});
Насколько я смог ответить на этот вопрос, JQuery UI сортируется и выбирается
Спасибо
3 ответа
Вот мой обходной путь для создания списка, который можно выбирать и сортировать, и который позволяет реализовать его с помощью лассо. Вот скрипка.
<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>
$(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);
}
});
//
});
<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 blue;
}
#album2 {
list-style: none;
float: left;
width: 20%;
border: 1px solid blue;
}
#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 green;
}
</style>
<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>
</html>
Мне удалось заставить его работать. Проверьте скрипку.
В основном я использовал jquery.multisortable плагин, который расширяет настройки по умолчанию sortable виджет. Таким образом, вы можете выбрать несколько элементов, нажав на них Ctrl +. Вы можете перетащить, чтобы изменить порядок и / или перемещать элементы между списками.
В качестве альтернативы, если вы хотите придерживаться исходного механизма с выделенными прямоугольниками и ручками перетаскивания, вы все равно можете использовать selectable ( демо). Единственным недостатком является то, что multiselectable поведение позади multisortable остается активным, что означает, что он все еще пытается обрабатывать нажатия Ctrl+ (но не удается). Это просто небольшая неприятность, и вы, вероятно, можете настроить код multisortable так что не распространяется multiselectable который должен решить это.
Поскольку действие перетаскивания является более или менее тем же действием, что и выделение, вы должны отменить выделение, если элемент уже выбран.
$(".available, .assigned").selectable({
filter: "li",
cancel: ".ui-selected"
})
$("available, .assigned").sortable()