Кто-нибудь знает, как объединить пользовательский интерфейс jQuery, который можно выбрать и отсортировать? Этот script: http://nicolas.rudas.info/jquery/selectables_sortables/ не работает в Chrome, а также имеет модификации плагинов.
Пользовательский интерфейс jQuery настраивается и выбирается
Ответ 1
Просто нашел это очень простое решение от rdworth:
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>
JavaScript:
$( "#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>" );
Смотрите: этот скрипт.
Ответ 2
Это столько, сколько я могу дать u:), но идея есть. его не alllll полный, но, надеюсь, вы можете играть со значениями и посмотреть, как это происходит:)
Ответ 3
Часть моего базового арсенала jQuery включает в себя следующее: обычно это раздражает, когда вы перетаскиваете что-то и в итоге выбираете текст...
// disables text selection on sortable, draggable items
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();
Не уверен, что вы можете просто перевернуть "отключить", чтобы "включить", но там мои $.02. Однако, не пытаясь понять это, здравый смысл предполагает, что вам может понадобиться определить неактивный раздел внутри одного и того же элемента "group", чтобы обеспечить "дескриптор" для действия перетаскивания.... или эти клики могут неумолимо ошибочно восприниматься как намерение выбрать/изменить...
Ответ 4
Попробуйте это. Вы можете использовать Ctrl + Click для множественного выбора и сортировки
Ответ 5
Если вы хотите выбрать несколько элементов и переместить их в другой список, это fiddle работает хорошо:
HTML:
<meta charset="utf-8" />
<title>jQuery UI Sortable with Selectable</title>
<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css'; return false;" />
<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>
Это было изменено из примера http://www.pieromori.com.br/snippets/sortable_with_selectable.html благодаря Пьеро Мори.