KendoUI подключить перетащить к сортируемым

Question

Можно ли каким-либо образом подключить перетаскиваемый элемент KendoUI для добавления в сортируемый список KendoUI в качестве примера с jQueryUI здесь: http://jqueryui.com/draggable/. Я бью себя по голове на один день, и это становится смешным. Стоит ли переходить на jQueryUI?

Answer 1

Вы проверяли виджет KendoUI Sortable? Это на самом деле довольно легко использовать.

Если это ваши элементы списка HTML:

<ul id="sortable">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
    <li>Option 6</li>
</ul>

Вам просто нужно сделать:

$("#sortable").kendoSortable({
});

Проверьте это здесь: http://jsfiddle.net/OnaBai/gN3jV/

При этой инициализации по умолчанию перетаскиваемый элемент выглядит как исходный (тот же стиль CSS), но вы можете изменить его, определив hint обработчик:

$("#sortable").kendoSortable({
    hint:function(element) {
        return element.clone().addClass("ob-hint");
    }
});

Где я добавляю в перетаскиваемый элемент класс CSS ob-hint,

Смотрите предыдущий измененный пример: http://jsfiddle.net/OnaBai/gN3jV/1/

И вы также можете стилизовать местозаполнитель (куда добавить), определив обработчик, который добавляет класс к элементу или даже к тексту.

$("#sortable").kendoSortable({
    hint:function(element) {
        return element.clone().addClass("ob-hint");
    },
    placeholder:function(element) {
        return element.clone().addClass("ob-placeholder").text("drop it here");
    },
});

Модифицированный пример здесь: http://jsfiddle.net/OnaBai/gN3jV/2/

Answer 2

Это невозможно сделать в элементах управления Kendo UI. Telerik говорит, что у них нет планов делать это и есть много оправданий, почему они не собираются этого делать.

Однако, используя некоторый JavaScript, есть способ обойти это. Если вы сделаете оба списка сортируемыми, вы можете отфильтровать "перетаскиваемые" элементы, чтобы они не меняли позиции.

$("#draggable").kendoSortable({
   connectWith: "#sortable",    
   start: function () {
     $("#draggable div").each(function () {
       $(this).removeClass("sortable");
     });
   }
});

Эта скрипка показывает это: http://jsfiddle.net/kgjertsen/r4xmLevq/

Единственный недостаток - "перетаскиваемый" элемент исчезает, пока вы не уроните его в область сортировки.