前端实现图片悬浮_【Web前端】如何达到这种随意拖拽的效果？

演示：效果1：在网页上随意拖拽。

效果2：鼠标经过时的描边。

效果3：在图片之间连线。

1. 随意拖拽

树型解释：1.每当鼠标移动时，记录下是否【单击】了某一张图片：

否：什么也不做

是：记录下图片的id；记录下鼠标当下的坐标{x:event.pageX,y:event.pageY} ；设置first_click为True

1.1. 在first_click为True的情况下，判断鼠标是否再次点击：

否：从被【单击】的元素处为出发点，到鼠标“现在的即时位置”为结束点，画一条线。随着鼠标的移动，这条线的末端随鼠标位置移动。

2. 鼠标再次点击了。从被【单击】的元素处为出发点，到鼠标点击结束的位置，画一条线。将这条线的记录存入数据库，并利用http://socket.io通知前端更新视图。这样就留下了一条线。

2.1.鼠标放开的两种情况：

①移到了另一个元素的位置，并【单击】了该元素。则依照第2条那样做。

②移到了空白处，并【双击】鼠标。则新产生一个图片元素，并将第一次点击的元素与之连线。

// index.jswindow.onmousemove = (event)=>{

vm.mousepos = {x: event.pageX,y: event.pageY}

};

window.onmouseup = (evt)=>{

vm.now_id = -1

};

window.ondblclick = (evt)=>{

if(vm.first_click) {

vm.first_click = false;

//顺序：先创建元素，再连接成线。 socket.emit('addpostit',{text:"小熊"+(Math.random()*1000+1000).toFixed(0),src:"/top_img/bear.jpg",status:1,pos:{x:event.pageX,y: event.pageY}});

socket.emit('addlin