在jsPlumb中拖放各種元素

我正在使用jsPlumb，並試圖創建2個元素的簡單工具箱。需要將這些元素拖放到畫布上，以便在其中執行進一步的操作，例如在它們之間創建連接並刪除它們。但就目前而言，我已經能夠接受2分的方式。取決於接受的div，要添加的類以及要添加到元素更改的字段。下面的代碼的工作版本：https://github.com/NayantaraJeyaraj/MultipleElements 在jsPlumb中拖放各種元素

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

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

    });

而且可放開方法：

$("#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'否則如果接受的div是'.query'它需要添加「que」類而不是pro類。但在這裏，目前它爲兩個實例添加了專業類。我如何檢測哪些被接受，然後相應地添加課程？

來源

2016-05-30 Nayantara Jeyaraj

我曾與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) 
    } 

});

在這裏，我有拖拽的一些基本的例子，多選，以及作爲組的概念。

並特別尋找您特別尋找的停止功能。

謝謝。

來源

2016-09-22 10:36:31

在jsPlumb中拖放各種元素

回答

相關問題