javascript - 使用 Kendo 获取和设置属性，可在更改事件上排序

Question

当列表项移动到我的 mvc 页面上的其他列表时，只想获取和设置不同的属性...到目前为止我无法访问任何内容。问题出在 javascript 中，它很好地命中了 onchange 事件。为了简洁起见，我没有在 cshtml 中发布“可用列表”。这是 console.log 底部的内容:

SpecialNeedInActiveList change: Meds per tube newIndex: -1 oldIndex: 5 action: remove SpecialNeedActiveList change: Meds per tube newIndex: 3 oldIndex: -1 action: receive

任何帮助将不胜感激，这对我来说花了太长时间。

HTML:

<div class="col-md-6" id="SpecialNeedContainerLL">
            <ul id="SpecialNeedActiveList" class="col-md-6">
                @if (Model.SelectedSpecialNeeds.Any())
                {
                    foreach (var y in Model.SelectedSpecialNeeds)
                    {
                        <li class="list-item" selected-personspecialneed="@y.PersonSpecialNeedId" selected-need-type="@y.SpecialNeedTypeId"> @y.SpecialNeedDescription </li>
                    }
                }
            </ul>
        </div>
 @(Html.Kendo().Sortable()
.For("#SpecialNeedActiveList")
.ConnectWith("#SpecialNeedInActiveList")
.PlaceholderHandler("placeholder")
.Events(events => events.Change("onChange"))
    )

Javascript:

function onChange(e) {
var id = e.sender.element.attr("id"),
    text = e.item.text(),
    newIndex = e.newIndex,
    oldIndex = e.oldIndex;

if (id == 'SpecialNeedActiveList' && newIndex > -1) {

    //add item to selected list
    //remove item from availables list

    /*NONE of the following works...*/
    //var oldPersonSpecialNeedId = e.sender.element.getAttribute('available-personspecialneed');
    //var oldSpecialNeedTypeId = e.sender.element.getAttribute('available-need-type');
    //e.sender.element.removeAttribute('available-personspecialneed');
    //e.sender.element.removeAttribute('available-need-type');
    //e.sender.element.setAttribute('selected-personspecialneed', oldPersonSpecialNeedId);
    //e.sender.element.setAttribute('selected-need-type', oldSpecialNeedTypeId);
}
console.log(id + " change: " + text + " newIndex: " + newIndex + " oldIndex: " + oldIndex + " action: " + e.action);
}

Answer 1

当您处于更改事件处理程序(onChange())中时，e.sender.element不是被拖动的项目，它是发送更改事件的列表，<ul>元素。

被拖/放的项目包含在 e.item 字段中，您应该能够正常操作它，例如使用 jQuery(但您可以使用您喜欢的任何 DOM 操作技术):

var $item = $(e.item);

var oldPersonSpecialNeedId = $item.attr('selected-personspecialneed');
var oldSpecialNeedTypeId = $item.attr('selected-need-type');
$item.attr("selected-personspecialneed", "new" + oldPersonSpecialNeedId);
$item.attr("selected-need-type", "new" + oldSpecialNeedTypeId);

这是一个显示属性更改的工作示例:http://dojo.telerik.com/@Stephen/arUpO

它基于问题中代码中的单个列表，而不是 2 个列表，但它只是演示了如何从可排序更改事件访问拖动的元素，这是问题的核心。

话虽如此，我可能会研究使用 DataSource 绑定(bind)列表，以便您可以操作模型的字段而不是 DOM 元素的属性。 http://demos.telerik.com/aspnet-mvc/sortable/integration-listview是一个很好的起点。