html设置边框可以随意拖动,如何达到这种随意拖拽的效果？

演示：

体验地址：workmates.me效果1：在网页上随意拖拽。

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

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

效果1. 随意拖拽。

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

否：什么也不做

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

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

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

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

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

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

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

// index.js

window.οnmοusemοve=(event)=>{

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

}};

window.οnmοuseup=(evt)=>{

vm.now_id=-1

};

window.οndblclick=(evt)=>{

if(vm.first_click){

vm.first_click=false;

//顺序：先创建元素，再连接成线。

socket.emit('addpostit',{text:"小熊"+(Math.random()*1000+1000).toFixed(0),src:"