Возможно, я не понимаю, как работает клоун с сортировкой, но вот что я хотел бы сделать.
При сортировке элемента я хотел бы, чтобы клон элемента, который я перетаскиваю, остается до тех пор, пока я не остановлю элемент в новой позиции.
Здесь код:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<style type="text/css">
.sort { width: 150px; }
.ui-state-highlight { background-color: #000; height:2px; }
</style>
</head>
<body>
<div>
<ul class="sort">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$('.sort').sortable({
helper: 'clone',
placeholder: 'ui-state-highlight',
opacity: '.5'
})
})
</script>
</body>
</html>
Заранее благодарим за помощь!
Когда вы используете опцию clone, исходный элемент скрывается при style="display: none" при перетаскивании. Вы можете связать обработчик события сортировки (или какое-либо событие, скрывающее исходный элемент), чтобы повторно показать его. Тогда все должно работать на вас.
P.S. Я использовал Firebug, чтобы посмотреть, что происходит с исходным элементом. Если вы не используете его, вы действительно должны быть!
Только один способ взломать его. Вы можете провести здесь. Измените конфигурацию, как показано ниже.
$('.sort').sortable({
helper: 'clone',
placeholder: 'ui-state-highlight',
opacity: '.5',
start: function(event, ui) {
$('.sort').find('li:hidden').show();
}
})
У меня есть два списка, sortable1 и sortable2. Я хочу клонировать элементы из sortable1 в sortable2 и наоборот.
Одно из улучшений должно состоять в том, чтобы проверить, является ли он верхним элементом, если это так. prev() не будет работать. Поэтому проверьте, существует ли prev, если не использовать after().
Мое решение было следующим:
$("#sortable1").sortable({
helper:"clone",
connectWith: "#sortable2",
start:function(event,ui){
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
},
stop:function(event, ui){
before.after(clone);
}
}).disableSelection();
$("#sortable2").sortable({
helper:"clone",
connectWith: "#sortable1",
start: function(event, ui){
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
},
stop:function(event, ui){
before.after(clone);
}
}).disableSelection();
Хотя это может и не решить проблему. В конце ваших параметров есть дополнительная запятая.
opacity: '.5',
Несколько слов об улучшениях, которые сказал Джон Бледсо. Для клонирования первых элементов в # sortable1 я использую такой код:
stop:function(event, ui){
if (before.length) before.after(clone);
else $(this).prepend(clone);
},