Кендо Сортируемый (две колонки): Вопросы, движущиеся панели

Question

Вот мой рабочий код до сих пор:

http://jsfiddle.net/fmpeyton/9a8sxw9z/

Вот Кендо Сортируемый Инициатор:

$(".panels").kendoSortable({ 
    filter: ".panel", 
    cursor: "move", 
    change: function() { 

    }, 
    placeholder: function (element) { 
     return element.clone() 
     .css({ "opacity": 0.8, }); 
    }, 
    hint: function (element) { 
     return element.clone() 
     .css({ "border": "1px solid #a2a2a2" }) 
     .height(element.height()) 
     .width(element.width()); 
    } 
}); 

У меня несколько вопросов:

1. Когда я перемещаю все панели из колонки, я не могу переместить панели обратно в пустую колонку
2. В некоторых редких случаях я не могу перемещать определенные панели. (Один сценарий, который я могу воспроизвести, перемещает «Панель 1» из левого столбца в верхнюю часть правого столбца. Несмотря на то, что панель заполнителя показывает, панель всегда возвращается в исходное положение.)
3. Когда у меня есть панель 1 "в левом столбце и в остальных трех панелях справа, чтобы иметь возможность отбрасывать панель под« панелью 1 », мне нужно сначала перетащить ее на« панель 1 », чтобы вызвать эту функцию. В идеале, я бы хотел утащить его под ним и бросить туда.

Любая идея, почему это может произойти? Существуют ли какие-либо изменения CSS, которые я мог бы сделать для решения этой проблемы?

Answer 1

Так я решил этот вопрос два раза:

1. Initializing два экземпляра Sortable виджета и соединив их через connectWith вариант
2. Добавление min-height к столбцам, так что вы можете добавить панели для пустых столбцов.

Большой реквизит @OnaBai за помощь в решении этого вопроса. Вот рабочая скрипка: http://jsfiddle.net/fmpeyton/m72f5z6h/

Answer 2

Объяснение ваших проблем связано с тем, что возможно оптимизация в пользовательском интерфейсе Kendo. Когда вы определяете Sortable, он создает список со всеми сортируемыми элементами. Когда вы пытаетесь сбросить элемент в том же положении заказа, он отклоняет движение. То есть Если вы попытаетесь перенести последний элемент первого столбца в первую позицию второго столбца, KendoUI вычислит, что oldIndex и newIndex совпадают, так как нет изменений, он отклоняет движение.

Sortable предназначено для сортировки, а не для перетаскивания. Когда вы перемещаете элемент между столбцами, вы не сортируете, а перетаскиваете. В вашем случае верно, что существует большая визуальная разница между последним в одном столбце или первым в другом, но если вы считаете, что с точки зрения индексов и массивов не имеет значения.

Если у вас пустой столбец, вопрос заключается в том, что область отбрасывания должна быть panel (для чего вы фильтруете). Будучи пустым, нет допустимой области, где его можно сбросить.

Вы должны рассмотреть возможность использования Draggable и DropTargetArea и DropTarget.