gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:53:49 30 4
gpt4 key购买 nike

我正在尝试将 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");
}

最佳答案

正在放置的项目的数据由 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>

这会在被拖动的 DOM 中保存 Id(或任何允许您找到元素的信息)。然后在处理程序中,我们检索 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));
    }

    关于kendo-ui - Kendo UI MVVM 与 Kendo UI 拖放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18113581/

    30 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com