kendo-ui - Kendo UI MVVM 与 Kendo UI 拖放

Question

我正在尝试将 Kendo UI MVVM 框架与 Kendo UI 拖放机制结合使用；但是我很难找到如何从 draggable 对象中删除数据。

我的代码是这样的……

var viewModel = kendo.observable {
    Cart : [],
    Items : [
    {
      Id : "item/10",
      Name: "CD ROM"
    },
    {
      Id : "item/11",
      Name: "DVD ROM"
    }
};

那么我就有了一个粗略的模板绑定(bind)...

<script id="products-template" type="text/x-kendo-template">
    <li class="draggable">
        <div data-bind="text: Name"></div>
    </li>
</script>

然后在列表中调用...

<div id="shopping-items-available">
   <ul data-template="products-template" data-bind="source: Items">
   </ul>
</div>

然后有一个标准的“放置目标”(取自剑道文档)

<div id="droptarget">Start dragging.</div>

使用以下 CSS

#droptarget {
    border: 1px solid #959595;
    height: 198px;
    width: 300px;
    font-size: 36px;
    border-radius: 37px;
    text-align: center;
    line-height: 198px;
    color: #a1a1a1;
    text-shadow: 0 1px 1px #fff;
    margin: 0 0 30px 220px;
    cursor: default;
    background: #dddddd;
    background: -moz-linear-gradient(top, #dddddd 0%, #c1c1c1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#c1c1c1));
    background: -webkit-linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
    background: -o-linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
    background: -ms-linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
    background: linear-gradient(top, #dddddd 0%,#c1c1c1 100%);
}

现在在 javascript 中，我将 shopping-items-available div 变成一个 draggable。

    $("body").kendoDraggable({
        hint: function (target) {
            return $(target).clone().addClass("draggable");
        },
        filter: ".draggable"
    });

最后，我初始化放置目标。

    $("#droptarget").kendoDropTarget({
        drop: droptargetOnDrop
    });

但在我的代码中，我似乎无法获得关于被丢弃元素的实际数据。

    function droptargetOnDrop(e) {
        console.log(e);
        $("#droptarget").text("You did great!");
        $(".draggable").removeClass("hollow");
    }

Answer 1

droptargetOnDrop 以 e.draggable.currentTarget 的形式接收被放置项目的数据。

如果你想将项目移动到目标区域，你应该这样做:

$("#droptarget").append(e.draggable.currentTarget);

注意这样做，您将移动项目。如果你想附加一个副本，你应该附加一个节点的克隆:

 $("#droptarget").append($(e.draggable.currentTarget).clone());

编辑:为了在不使用 kendoDataSource 的情况下获取数据项，我建议将模板更改为:

<script id="products-template" type="text/x-kendo-template">
    <li class="draggable" data-id="${Id}">
        <div data-bind="text: Name"></div>
    </li>
</script>

这会将 Id(或允许您在后面找到元素的任何信息)保存在被拖动的 DOM 中。然后在处理程序中，我们检索 Id 并搜索与该 Id 对应的项目。

function droptargetOnDrop(e) {
    var dom = e.draggable.currentTarget;
    var id = $(dom).data("id");
    var items = viewModel.Items;
    for (var i = 0; i < items.length; i++) {
        if (items[i].Id == id) {
            alert("Found : " + JSON.stringify(items[i]));
            break;
        }
    }
}

编辑 如果您决定使用kendoListView，您应该将模板定义为:

<script id="products-template" type="text/x-kendo-template">
    <li class="draggable">
        <div>${Name}</div>
    </li>
</script>

列表的 HTML 容器是:

然后初始化ListView为:

var list = $("#shopping-items-available > ul").kendoListView({
    template  : $("#products-template").html(),
    dataSource: viewModel.Items
}).data("kendoListView");

最后是 droptargetOnDrop 函数:

function droptargetOnDrop(e) {
    var dom = e.draggable.currentTarget;
    var item = list.dataSource.getByUid(dom.data("uid"));
    alert("Found : " + JSON.stringify(item));
}