$('.list-group-item').attr('draggable','true').on('dragstart', function(ev){
//ev.dataTransfer.setData("text", ev.target.id)
ev.originalEvent.dataTransfer.setData('text',ev.target.textContent)
console.log('drag start')
})
$('#container-id').on('drop', function(ev){
//avoid event conlict for jsPlumb
if (ev.target.className.indexOf('_jsPlumb') >= 0 ) {
return
ev.preventDefault()
var mx = '' + ev.originalEvent.offsetX + 'px'
var my = '' + ev.originalEvent.offsetY + 'px'
console.log('on drop : ' + ev.originalEvent.dataTransfer.getData('text'))
var uid = new Date().getTime()
var node = addNode('flow-panel','node' + uid, 'node', {x:mx,y:my})
addPorts(instance, node, ['out'],'output')
addPorts(instance, node, ['in1','in2'],'input')
instance.draggable($(node))
}).on('dragover', function(ev){
ev.preventDefault()
console.log('on drag over')
})
这里要注意的是要避免和jsPlumb拖拽端点的逻辑冲突，当检测到target是jsPlumb对象是需要直接从drop方法中退出以执行对应的jsPlumb的drop逻辑。
好了，一个绘制流程图的软件工具初步完工。
N-S图简介N-S图也被称为盒图或CHAPIN图。
流程图由一些特定意义的图形、流程线及简要的文字说明构成，它能清晰明确地表示程序的运行过程。在使用过程中，人们发现流程线不一定是必需的，为此，人们设计了一种新的流程图，它把整个程序写在一个大框图内，这个大框图由若干个小的基本框图构成，这种流程图简称N-S图
http://baike.baidu.com/view/300131.html?wtp=tt
