Поддающийся сортировке помощник клона, не работающий
Возможно, я не понимаю, как работы клона с поддающимся сортировке, но вот - то, что я хотел бы сделать.
При сортировке объекта я хотел бы клон объекта, который я перетаскиваю, остаются, пока я не останавливаюсь, отбрасывают объект в его новом положении.
Вот код:
<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>
Заранее спасибо за справку!
3 ответа
При использовании опции клонирования исходный элемент скрывается с 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();
}
})
Хотя это может не решить вашу проблему. В конце ваших параметров стоит дополнительная запятая.
opacity: '.5',