3

こんにちは、私は KendoUI を初めて使用し、ドラッグ アンド ドロップで listView を並べ替えようとしています。listViewew プラグインの CORE にドラッグ可能な機能がないことに気付いたので、Kendo Framework からドラッグ可能なアクションを追加しようとしていますが、まだ近くにいません。

ドラッグ アンド ドロップで listView アイテムを並べ替えることは可能ですか?

KendolistviewとKendo Drag

KendoUI プラグインの 1 つにこの機能があることに気付きました。

ツリービューのデモ

PS: デモやそれに類するものは大歓迎です。

4

2 に答える 2

5

ListView として動作するだけでなく、実際の ListView であることが必要な場合は、次のようにします。

var dataSource = new kendo.data.DataSource({
    data    : products,
    pageSize: 10
});

$("#listView").kendoListView({
    dataSource: dataSource,
    template  : kendo.template($("#template").html()),
    dataBound : function () {
        $(".product").kendoDraggable({
            hint: function (element) {
                return element.clone();
            }
        });
    }
});

$("#listView").kendoDropTargetArea({
    filter: ".product",
    drop  : function (e) {
        var srcUid = e.draggable.element.data("uid");
        var dstUid = e.dropTarget.data("uid");
        var srcItem = dataSource.getByUid(srcUid);
        var dstItem = dataSource.getByUid(dstUid);
        var dstIdx = dataSource.indexOf(dstItem);
        dataSource.remove(srcItem);
        dataSource.insert(dstIdx, srcItem);
        e.draggable.destroy();

    }
});

基本的に、各要素を CSS クラスで識別し.product、それを使用して DataSource に挿入したり削除したりします。これにより、自動的に再描画されます。

ここで実行例を参照してください: http://jsfiddle.net/OnaBai/MYbgy/1/

于 2013-10-25T18:11:30.943 に答える
1

これはうまくいくかもしれないと思います：

$("#sortable").kendoTreeView({
    dataSource :dataSource,
    template   :"<div class='ob-item'> #= item.text # </div>",
    dragAndDrop:true,
    drag       :function (e) {
        var dst = $($(e.dropTarget).closest(".k-item")[0]).data("uid");
        var src = $(e.sourceNode).data("uid");
        if ($(e.dropTarget).hasClass("ob-item") && dst != src) {
            e.setStatusClass("k-insert-top");
        } else {
            e.setStatusClass("k-denied");
        }
    },
    drop       :function (e) {
        if ($(e.sourceNode).data("uid") !== $(e.destinationNode).data("uid")) {
            $(e.sourceNode).insertBefore(e.destinationNode);
        }
        e.setValid(false);
    }
});

ここにもいくつかの情報があります

于 2013-10-25T12:44:54.497 に答える