Question

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

SpecialNeedInActiveList更改：Meds per tube newIndex：-1 oldIndex：5 action：remove SpecialNeedActiveList更改：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绑定列表，以便您可以操作模型的字段而不是DOM元素的属性。 http://demos.telerik.com/aspnet-mvc/sortable/integration-listview是一个很好的起点。

使用Kendo获取和设置属性可在change事件上进行排序

1 个答案: