UIkit - ソート可能なコンポーネントでオーダーを取得する方法は？

Question

UIkit sortable componentを実装し、stopイベントを追加しました。しかし、アイテムがドラッグされた場合に新しい注文を計算する方法を理解することはできません。これまで私が考えることができるのは、各アイテムにIDを与え、そのIDに基づいて計算することですが、正しい方法とは思われません。

Answer 1

これを実現する方法は非常に簡単です。 要素はオリジナルイベントを格納します。explicitOriginalTarget - 移動要素。私が必要とする要素のレベルに達しているので、それをjQueryオブジェクトに変換します（あなたはそうする必要はありません。速かった）、あなたはそのインデックスを得ることができます。私は：これらの値のすべては、このソリューションの唯一の問題点は、パフォーマンスで、それは動作しますが、あなたはあまりにも頻繁に要素を移動するとき、それは0ではなく、正しいインデックス値

EDITを表示することができますconsole.log(e);

によってアクセスすることができますあなたはおそらく、現在移動した項目のインデックスだけでなく、全体のアイテムのセットとその順序について求めている実現ので、私はまた、以下に、この同様

例のロギングコンソールを追加しました：

var indexes = new Array(); 
 

 
$(document).on('moved', '.uk-sortable', function(e) { 
 
    var currentLi = e.originalEvent.explicitOriginalTarget.parentNode; 
 
    indexes = []; 
 
    $(this).find('li').each(function() { 
 
    indexes.push($(this).data("index")); 
 
    }); 
 
    alert("New position: " + $(currentLi).index()); 
 
    console.log(indexes); 
 
}); 
 

 
$('.uk-sortable').find('li').each(function(i) { 
 
    $(this).data("index", i); 
 
    indexes.push(i); 
 
}); 
 
console.log(indexes);

<!-- UIkit CSS --> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" /> 
 

 
<!-- UIkit JS --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit-icons.min.js"></script> 
 
<ul class="uk-grid-small uk-child-width-1-4 uk-text-center" uk-sortable="handle: .uk-card" uk-grid> 
 
    <li> 
 
     <div class="uk-card uk-card-default uk-card-body">Item 1</div> 
 
    </li> 
 
    <li> 
 
     <div class="uk-card uk-card-default uk-card-body">Item 2</div> 
 
    </li> 
 
    <li> 
 
     <div class="uk-card uk-card-default uk-card-body">Item 3</div> 
 
    </li> 
 
    <li> 
 
     <div class="uk-card uk-card-default uk-card-body">Item 4</div> 
 
    </li> 
 
    <li> 
 
     <div class="uk-card uk-card-default uk-card-body">Item 5</div> 
 
    </li> 
 
    <li> 
 
     <div class="uk-card uk-card-default uk-card-body">Item 6</div> 
 
    </li> 
 
    <li> 
 
     <div class="uk-card uk-card-default uk-card-body">Item 7</div> 
 
    </li> 
 
    <li> 
 
     <div class="uk-card uk-card-default uk-card-body">Item 8</div> 
 
    </li> 
 
</ul>