変更イベントでソート可能な剣道で属性を取得して設定する

Question

リスト項目が自分のmvcページの他のリストに移動されたときに、異なる属性を取得して設定したいだけです...これまでのところアクセスできません。問題はjavascriptで、onchangeイベントをうまくいきます。私は簡潔にするためにcshtmlの "利用可能なリスト"を投稿しませんでした。

SpecialNeedInActiveListの変更を：チューブnewIndexがあたりクスリ：-1 oldIndex：5アクション： SpecialNeedActiveListの変更を削除：チューブnewIndexがあたりクスリ：3 oldIndex：-1アクション：これは下のようにconsole.logを読み込むものです受信

これは長すぎます。

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>要素を送信したリストです。

項目であるドラッグ/ドロップあなたはjQueryのを使用して、例えば、通常のように操作することができるはずである、e.itemフィールドに含まれる（しかし、あなたが好きな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つのリストから単一のリストに基づいていますが、それは単にソート可能な変更イベントからドラッグされた要素にアクセスする方法を示しています、これはあなたの問題の核心です。

私はおそらく、DOM要素の属性の代わりにモデルのフィールドを操作できるように、DataSourceバインドされたリストを使用して調査すると思います。 http://demos.telerik.com/aspnet-mvc/sortable/integration-listviewは良いスタート地点です。