js html 流程图 关系图

JavaScript013

js html 流程图 关系图,第1张

没有例子，不太明白你想要什么。。。。从图看职能是ps出来的切到网站上

不过做图表的特效倒是有，和你给的不太一样

你看看这个是不是你想要的效果

http://hci.stanford.edu/jheer/files/zoo/ex/networks/force.html

下面是合集地址

http://queue.acm.org/detail.cfm?id=1805128

//Handle drag and drop

$('.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逻辑。

好了，一个绘制流程图的软件工具初步完工。