получить идентификатор сброшенного div с помощью dragula javascript

Question

Я пытаюсь обновить таблицу c3.js, используя drag и drop с dragula.js, но я не знаю, как получить идентификатор div, который перетаскивается в новый контейнер. Мой 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 перетащить:

dragula([collapse1,collapse2]); 

Я действительно новичок в JQuery, но после this question, чтобы получить доступ к идентификатору <div> упал в collapse2 в Я пытался сделать что-то вроде этого:

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

но результатов. Любая помощь была бы действительно оценена

Answer 1

Не могу ответить на вопрос напрямую, потому что я не знаком с dragula. Тем не менее, я использовал jqueryUI drag drop экстенсивно и его действительно хороший инструмент. Вы можете попробовать эту инфраструктуру.

Поскольку вы попросили пример, я впился в какой-то старый код. Возможно, вам захочется ознакомиться с учебниками jqueryUI для перетаскивания и droppable, чтобы дать вам некоторое представление, прежде чем смотреть на это. Я включил части функции. Я помещал маленькие точки, чтобы показать вам, где код был оставлен. Я положил < < < следующий ключевые строки для вас. Обратите внимание, как я использую закрытие, чтобы сделать ссылки доступными для разных частей. Закрытие является soooo awesome. Я злоупотребляю смертью, поэтому научитесь использовать его, если сможете.

Обратите внимание, что как только я получил свой объект перетаскивания, это то, о чем вы просите. Обратите внимание, как я привяжу переменную к моей функции позже, когда зарегистрирую перетаскиваемый.

Btw, обратите внимание, что есть функция остановки перетаскивания, на которую я не показываю определение. Если вы переместите объявление объекта dragObject за пределы startDrag, вы также можете увидеть его с помощью stopDrag, так как определение функции «включено» в функцию внешнего регистра.

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.

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