Dragula - dragulaドロップイベントのクラスを渡します

Question

私は複数の列にドラッグ可能なオブジェクトを持っているので、ドロップされたときにそのオブジェクトの変数は、別のオブジェクトとしてどの列に応じて更新されるようにする必要がありますその変数を表示用に操作します。私はタグから作業する（ondrop）イベントを取得することができませんでした。そして、dragulaイベントリスナーの値は、私にオブジェクトを取得させる情報を渡しません。とにかく、イベントリスナーがhtmlタグの代わりにオブジェクトを渡すように強制する必要はありますか？またはいくつかの方法がありますか？

Answer 1

私はドロップでデータを更新できると思います。私はこれをこのようにした：

var drake = dragula({...}); 

function updateMyObject(elementId, listId) { 
    // update the object here, for example: 
    if (listId === 'firstList') { 
    // use the element id to find the item in your object and update it 
    myDataObject.filter(function(x) { 
     return x.id === elementId; 
    })[0].propertyToUpdate = listId; 
    } 
} 

drake.on('drop', function(el, target, source, sibling) { 
    var elementId = el.id; 
    updateMyObject(el.id, target.id); 
}); 

このペンは役に立ちます。 DragulaとAngular.jsをデータモデリング用に混在させています。このイベントは、ドロップ時にデータモデルを更新する必要があります。 http://codepen.io/chris22smith/pen/37459a002cbe6b6cd37aa5e927698fba

Answer 2

私が見つけた唯一の解決策（別のdrag'n'dropモジュールを使用するのは簡単です）は、ユーザーがページを閉じるか別のものに行くときに注文を保存することです。または、ドロップイベントがキャッチ可能であるが、クラスオブジェクトを与えることができないように見えるので、変更があったときにそれを検出してすべてを更新することができます。 1つの変数を更新するよりもシステムリソースに課税されます。

Answer 3

オーダー番号を要素の属性として渡して、drake.on関数でアクセスできるようにします。 oder＃とIDを使用すると、それをどうするかを把握し、バックエンドで適切な更新を行うことができます。