Jquery Сортируемые элементы, не добавляемые в конец горизонтального списка

Question

Я надеялся, что кто-то может помочь мне определить, почему этот Sortable List ведет себя так странно.

На странице показан «этап» (область пустой зоны падения), а под ним - список слов, которые нужно перетащить на область сцены.

Проблема заключается в том, что при перетаскивании слов на сцену все ведет себя так, как ожидалось, до тех пор, пока вы не добавите больше слов, чем может поместиться в одну строку. Слова переполнения автоматически перемещаются в новую строку.

Новая строка не принимает слова, добавленные в конец, но будет принимать их только между ранее размещенными словами.

Пожалуйста, смотрите мой JSFiddle, демонстрирующий вопрос:

var oldList, newList, item; 
$('.parent').sortable({ 
    revert: "100", 
    helper: 'clone', 
    start: function (event, ui) { 
    item = ui.helper; 
    newList = oldList = item.parent().parent(); 
    $('.word').removeClass('correct ok wrong selected'); 
    $(item).addClass('picky'); 
    }, 
    stop: function (event, ui) { 
    $(item).removeClass('picky'); 
    }, 
    change: function (event, ui) { 
    if (ui.sender) newList = ui.placeholder.parent().parent(); 
    }, 
    connectWith: "#wordcontainer, .parent" 
}).disableSelection(); 

Я бы признателен за любые предложения относительно исправления или объяснений того, почему это происходит.

UPDATE:

я решил решить эту проблему по-другому.

Я добавил ряд пустых элементов, к «сцене» в вызове STOP: $("#row1").append('<div class="spacer_cell"></div>');

И я тогда заставить пустые проставки в конце списка: $('.spacer_cell').appendTo('#row1');

это обеспечивает что вы всегда отбрасываете новый элемент между двумя другими.

Это немного грубо, но, как представляется, обеспечивает желаемый эффект.

Благодаря

Дэвид

Answer 1

Ваш сортируется DIV имеет фиксированную высоту 80px, поэтому вы можете только падение элементов внутри этой высоты. Третий ряд сидит ниже 80px.

Вы должны сделать div # row1 задавать динамическую высоту. Вы можете сделать это:

.parent.ui-sortable{ 
    height: 100%; 
    width: 300px; 
} 

(Вы должны удалить встроенный стиль)

Другой пример: http://jsfiddle.net/Lhtort8e/

Обновление:
Для лучшего поведения «меток», вы должны использование display: inline-block вместо float: left

.word { 
    display: inline-block; 
    vertical-align: top; 
}