1

我需要启用从 kendo-ui 树视图拖放到模板列表视图。我尝试了以下方法：

1.在treeview上启用dragAndDrop并将listview配置为kendoDropTarget

2.在树视图上禁用 dragAndDrop，而是将该控件配置为 kendoDraggable 到配置为 kendoDropTarget 的列表视图

<div>
<div id="treeview">        
</div></div>   


<div id="favorites-window" style="height:185px;width:1170px">
<div class="report-reader" style="height:185px;width:1170px;overflow:auto">
    <div id="listView"></div>
</div>                            
</div>

    $("#favorites-window").kendoWindow({
    width: "1180",
    height: "185",
    resizable: false,
    draggable: false,        
    actions: ["Custom"],
    title: "Favorites"
});
$("#listView").kendoListView({
    selectable: "single",
    navigatable: false
}).kendoDropTarget({
    drop: function (e) {
        console.log(e);
        var item = getObjects(nucleusTreeJsonData, 'text', e.draggable.hint.text());
        $("#listView").data("kendoListView").dataSource.add(item);
    }
});

var inlineDefault = new kendo.data.HierarchicalDataSource({
                data: [
                    { text: "Furniture", items: [
                        { text: "Tables & Chairs" },
                        { text: "Sofas" },
                        { text: "Occasional Furniture" }
                    ] },
                    { text: "Decor", items: [
                        { text: "Bed Linen" },
                        { text: "Curtains & Blinds" },
                        { text: "Carpets" }
                    ] }
                ]
            });


    $("#treeview").kendoTreeView({
        dragAndDrop: true,
        dataSource: inlineDefault,
        dataTextField: "text"

    });
        //.kendoDraggable({
    //    container: $("#tree-pane"),
    //    hint: function () {
    //        return $("#treeview").clone();
    //    },
    //    dragstart: draggableOnDragStart
    //});

    $("#treeview").data("kendoTreeView").bind("dragstart", function (e) {
        if ($(e.sourceNode).parentsUntil(".k-treeview", ".k-item").length == 0) {
            e.preventDefault();
        }
    });

    /*$("#treeview").data("kendoTreeView").bind("drop", function (e) {
            e.preventDefault();
            var copy = this.dataItem(e.sourceNode).toJSON();
            if (e.dropPosition == "over") {
                //var item = getObjects(nucleusTreeJsonData, 'text',   e.sourceNode.textContent);
                $("#listView").data("kendoListView").add(copy);
            }
    });*/

    $('ul.k-group.k-treeview-lines div').children().css('font-weight', 'bold').find('div').css('font-weight', 'normal');

我运气不好。请看看我的小提琴。任何建议将不胜感激

http://jsfiddle.net/OhenewaDotNet/JQBZN/16/

4

2 回答 2

1

我知道这是一个老问题，但我也有，所以我继续用这个小提琴解决了这个问题。

http://jsfiddle.net/JQBZN/74/

这真的很基础，可能架构很糟糕，但我认为它至少展示了关键点：

$("#treeview").kendoTreeView({
    dragAndDrop: true,
    dataSource: inlineDefault,
    dataTextField: "text",
    drag: function (e) {
        /* Manually set the status class. */
        if (!$("#treeview").data('kendoTreeView').dataItem(e.sourceNode).hasChildren && $.contains($('#favorites-window')[0], e.dropTarget)) {
            e.setStatusClass('k-add');
        } else {
            e.setStatusClass('k-denied');
        }
    },
    drop: function (e) {
        if (e.valid) {
            /* Do your adding here or do it in a drop function elsewhere if you want the receiver to dictate. */
        }
        e.preventDefault();
    }
});
于 2014-01-18T20:15:15.407 回答
0

如果 KendoUI 工具集没有做您希望它做的事情，您可能会发现使用 jQuery UI 做您想做的事情更容易。它们都实现了相同的 jQuery 核心库。

如果您使用 jQuery UI，只需将“可拖动”绑定到您要拖动的元素，并将“可拖放”绑定到您的目标。从那里，您可以连接处理程序来做几乎任何您想做的事情。

我设置了一个简单的 jsFiddle 来演示它是如何工作的：

http://jsfiddle.net/e2fZk/23/

jQuery 代码非常简单：

$(".draggable").draggable();
$(".container").droppable({
    drop: function (event, ui) {
        var $target = $(this);
        var $source = ui.draggable;
        var newUrl = $source.find("input").val();
        alert("dropped on " + $target.attr("id") + ", setting URL to " + newUrl);
        $target.find("#imageDiv").html("<img id='myImage' />")
            .find("#myImage").attr("src", newUrl);
    }
});

API 文档在这里：

可拖动

可丢弃

于 2013-05-08T14:40:48.457 回答