dragula 자바 스크립트를 사용하여 떨어 뜨린 div의 ID를 얻습니다.

Question

drag3.js를 사용하여 드래그 앤 드랍을 사용하여 c3.js 차트를 업데이트하려고합니다. 그러나 새로 드래그 된 div의 ID를 얻는 방법을 모르겠습니다. 컨테이너. 내 HTML은 다음과 같이이다 :

<div id="collapse1" class="panel-collapse collapse"> 
    <div id="color1" class="form-inline">1</div> 
    <div id="color2" class="form-inline">2</div> 
    <div id="color3" class="form-inline">3</div> 
</div> 
<div id="collapse2" class="panel-collapse collapse"> 

</div> 

그리고 드래그 앤 드롭 dragula.js을 사용하고 있습니다 :의 ID에 액세스 할

dragula([collapse1,collapse2]); 

내가 JQuery와에 정말 새로운,하지만 this question 다음

alert($("#collapse1.collapse2 div:first").attr("id")); 

그러나 결과가 없습니다 :이 그런 짓을하려고했던에 <div>는 collapse2로 떨어졌다. 어떤 도움도 정말로 감사 할 것입니다.

Answer 1

나는 드래그 류에 익숙하지 않아 직접 질문에 답할 수 없습니다. 그러나 jqueryUI 끌어서 놓기 광범위하게 사용하고 정말 좋은 도구. 해당 프레임 워크를 시험해 볼 수도 있습니다.

예를 들어 질문했기 때문에 이전 코드를 파헤 쳤습니다. jqueryUI draggable 및 droppable 자습서를 살펴보고이를 살펴보기 전에 배경 지식을 제공하는 것이 좋습니다. 나는 함수의 일부를 포함시켰다. 나는 코드가 빠진 곳을 보여주기 위해 작은 점들을 넣었다. 나는 < < < 다음 키 라인을 넣었습니다. 참조를 다른 부분에서 사용할 수 있도록 클로저를 사용하는 방법에 유의하십시오. 폐쇄는 너무 멋지다. 나는 그걸로 죽음을 남용하고, 그렇게 할 수 있다면 그것을 사용하는 법을 배웁니다.

일단 드래그 개체를 얻으면 그 내용을 묻습니다. 나중에 draggable을 등록 할 때 변수를 내 함수에 참조하는 방법에 유의하십시오.

Btw, 내가 정의를 표시하지 않는 참조 정지 중지 기능이 있습니다. startDrag 외부에서 dragObject의 선언을 이동하면 함수의 정의가 외부 레지스터 함수에 "동봉"되어 있으므로 stopDrag에서도 dragObject를 볼 수 있습니다.

function tapeChart_registerDraggables(parentObject,scope) { 

    if ((parentObject==null)||(parentObject==undefined)) { 
     parentObject=$jq(document.body); 
    } 

    var availablesShow = false; 
    var savingToServer = false; 
    var dragClone = null; 

    var startDrag = function(event, ui) { 

     tapeChartDraggingReservation = true; 

     var dragObject = event.target; <<<<<< 

     if (dragObject.getAttribute("unassigned")=="true") { 
      var is_chrome = window.chrome; 
      var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1; 
      if (!is_chrome && !is_safari) { 
       $(ui.helper).css("margin-left", event.clientX - $(dragObject).offset().left); 
       $(ui.helper).css("margin-top", event.clientY - $(dragObject).offset().top);    
      } 
     } 

     ... 

     // assigned rooms 
    if (scope!="UNBLOCKED") { 
     // register items in the grid 
     $(parentObject).find(".NODRAGHELPER").draggable(
      { 
       snap : "true",     
       revert : "invalid", 
       start: startDrag, <<<< 
       stop: stopDrag 
      } 
     ) 
     .click(function(){ 
      if ($(this).is('.NODRAGHELPER-dragging')) { 
       return; 
      } 

      // seems that the user can drop and click fast 
      // prevent this 
      if (!savingToServer) { 
       tapeChart_getReservation(this); 
      } 
      return false; 
     }); 
    } 

    ... 

Answer 2

Dragula는 떨어 뜨린 div의 ID를 제공합니다.

const dragula = Dragula(['', '']); 
     dragula.on('drop', (el, target, source, sibling) => { 
     const itemId = get(el, 'id'); 
}