源码分享给大家哦,拿走不谢O(∩_∩)O
vue版本的根据项目需求做了些略微的修改
下面的数字其实是一个小列表ul li,你可以把li设置出边框 设置border-radius属性为50%,就能实现圆圈效果了.
<ul><li>1</li>
<li>2</li>
<li>3</li>
</ul>
<style>
li{border:solid 1px purpleborder-radius:50%magin-right:10px }
</style>
//即可实现数字边框变成圆形
然后根据鼠标左键在菜单坐标内按下放开的事件提取当前鼠标的x,y坐标,然后修改属性菜单的top和left属性 或者当鼠标在菜单坐标内按下之后触发鼠标的移动事件,然后在移动事件里设置菜单的top和left对应鼠标当前坐标y和x,这样当鼠标移动时菜单的坐标也会根本改变,实现同步移动