Перетаскивание различных элементов в jsPlumb

Question

Я работаю с jsPlumb и пытаюсь создать простой набор инструментов из 2 элементов. Эти элементы необходимо перетаскивать и удалять на холст, где могут выполняться дополнительные действия, такие как создание соединений между ними и их удаление. Но на данный момент я могу принять 2 div под методом droppable. В зависимости от принятого div, добавляемый класс и поля, добавляемые к элементу, изменяются. Рабочая версия следующего кода: https://github.com/NayantaraJeyaraj/MultipleElements

$(".project").draggable 
    ({ 
     helper : 'clone', 
     cursor : 'pointer', 
     tolerance : 'fit', 
     revert : true 

    }); 
    $(".query").draggable 
    ({ 
     helper : 'clone', 
     cursor : 'pointer', 
     tolerance : 'fit', 
     revert : true 

    }); 

И Droppable метод:

$("#container").droppable 
    ({ 
     accept: '.project, .query', 
     containment: 'container', 

     drop: function (e, ui) { 
      droppedElement = ui.helper.clone(); 
      ui.helper.remove(); 
      $(droppedElement).removeAttr("class"); 
      jsPlumb.repaint(ui.helper); 

      var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro'); 
      newAgent.text('Element ' + i); 
      $(droppedElement).draggable({containment: "container"}); 
      $('#container').append(newAgent); 

      jsPlumb.draggable(newAgent, { 
       containment: 'parent' 
      }); 
      newAgent.dblclick(function(e) { 

       jsPlumb.detachAllConnections(newAgent.attr('id')); 
       jsPlumb.removeAllEndpoints($(this)); 
       jsPlumb.detach($(this)); 
       $(newAgent).remove(); 
      }); 
      i++; 
     } 
    }); 

Что мне этот кусок кода, чтобы сделать это, чтобы добавить «про» класс в newAgent (как показано в коде), когда принятый div является «.project» else, если принятый div является «.query», ему нужно добавить класс «que» вместо pro-класса. Но здесь он добавляет класс pro для обоих экземпляров. Как я могу определить, что принимается, а затем добавить класс соответственно?

Answer 1

Я работал долго с jsplumb для моего проекта, и я думаю, что вы можете взглянуть на этой codepen: - http://codepen.io/soniabhishek/pen/XjNYGp?editors=1010

//This is specific function when drop occurs 
jsPlumb.draggable(c1_1,{ 
    stop: function(params){ 
    console.log("dropped", params) 
    } 

}); 

Вот у меня есть некоторые основные примера перетаскивания, множественный выбор, а также как групповые концепции.

И, в частности, обратите внимание на функцию остановки, которую вы особенно ищете.

Спасибо.