Уф!Исправить это было весело.
Первая проблема, когда список прокручивался вечно по горизонтали, я исправил с помощью некоторых простых изменений переполнения в вашем CSS.Я удалил оба атрибута переполнения из вашего .drag_column и поместил переполнение: скрыто в .drag_container.
.drag_container {
width: 1000px;
margin: 0 auto;
position: relative;
border: 1px solid black;
position: relative;
z-index: 1;
overflow: hidden;
}
.drag_column {
padding: 5px;
width: 490px;
height: 200px;
float: left;
position: relative;
}
К сожалению, когда я сделал это, он создал ошибку позиции, когда вы переместили перетаскиваемый объект из одного спискана другой (он будет стрелять вверх, в зависимости от того, какой элемент списка вы выбрали).Чтобы исправить это, я добавил строку «helper: clone» в вашу перетаскиваемую функцию создания.
$( "#available > li" ).draggable({
revert: 'invalid',
connectToSortable: '#selected',
containment: '#drag_container',
helper: 'clone'
});
Еще раз, это создало нежелательный эффект.Помощник клона делает это так, что в исходном списке никогда не удаляются элементы.Чтобы это исправить, мне пришлось вручную создать функцию, которая удаляла бы старый элемент.Я добавил в свой перетаскиваемый объект функцию start:, которая захватила идентификатор объекта и поместила его в переменную.Затем я создал объект перетаскивания из вашего списка #selected и сделал там функцию drop :.Эта функция удаления просто выполняет slideUp (100) для объекта с соответствующим идентификатором.Обратите внимание, что у меня есть создание переменной при запуске скрипта - это исправляет ошибку в IE.
var dragged = null;
$(function() {
$( "#available > li" ).draggable({
revert: 'invalid',
connectToSortable: '#selected',
containment: '#drag_container',
helper: 'clone',
start: function(ui, event) {
dragged = $(this).attr('id');
}
});
$( "#selected" ).droppable({
drop: function(event, ui) {
var ident = "#" + dragged;
$(ident).slideUp(100);
}
});
Я разместил страницу с полным HTML на http://pastehtml.com/view/1by9nfd.html, чтобы вы могли поигратьесли ты хочешь.Надеюсь, это поможет!