实现箭头拖拉指定的功能,可以将列表中的任务指定给人员,可以将绿色箭头替换,尽量附有源码提示
第一步肯定是借助了vuedraggable来实现拖拽;
第二步就是想办法来实现这个虚拟的箭头,鼠标按下的位置生成一个dom节点
第三步就是把这个dom节点根据移动的X、Y起始相对坐标,监听计算dom的长度和旋转角度
这个整体上还是有一定难度的,比如这个拖拽的效果还有延迟等等
给你一个思路吧 代码不给你了;
一、点击列表的数据监听点击事件获取当前点击行的数据
二、获取到行数据以后保存起来用于人员分配
三、在人员图标上面增加鼠标移入移出监听事件
四、当鼠标移入时判断行数据是否为点击状态如果是点击状态则获取行数据的id跟当前用户进行关联绑定即可,这里说明一下 鼠标移入后会触发移入事件获取用户信息从而进行人员和任务的绑定
五、如果没有监听到行数据被点击则提示用户选取数据在进行绑定
不一定非得用拖拉的方式实现啊,做成下拉选择不好吗
你这个直接用组件,引用调用一下就OK了,Vue 拖拽组件 vuedraggable 和 vue-dragging。