Kendo Sortable (две колонки): проблемы с перемещением панелей

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

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

Вот инициатор Kendo Sortable:

$(".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, которые я мог бы сделать, чтобы решить эту проблему?

Источник

2 ответа

Решение

Я решил эту проблему двояко:

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

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

Источник

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

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

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

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

Источник
Другие вопросы по тегам