Dragula - dragula drop 이벤트에서 클래스 전달하기

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 모듈을 사용하는 것으로부터 사용자가 페이지를 닫거나 다른 것으로 갈 때의 순서를 저장하는 것입니다. 또는 drop 이벤트가 catch 가능하지만 클래스 객체를 제공 할 수없는 것처럼 보이기 때문에 변경 사항이있을 때이를 감지하고 모든 것을 업데이트 할 수 있습니다. 그러나 이것이 최선의 해결 방법은 아닙니다. 하나의 변수를 업데이트하는 것보다 시스템 리소스에 과도한 부담이 있습니다.

Answer 3

order #을 요소의 속성으로 전달하면 drake.on 함수에서 액세스 할 수 있습니다. oder # 및 ID를 사용하여 수행 할 작업을 파악하고 백엔드에서 올바른 업데이트를 수행 할 수 있어야합니다.