vue+ts实现元素鼠标拖动效果 vue+ts实现元素鼠标拖动效果

【vue+ts实现元素鼠标拖动效果】本文实例为大家分享了vue+ts实现元素鼠标拖动效果的具体代码，供大家参考，具体内容如下
实现效果

文章图片

相关使用属性

// clientX 鼠标相对于浏览器左上角x轴的坐标；不随滚动条滚动而改变；// clientY 鼠标相对于浏览器左上角y轴的坐标；不随滚动条滚动而改变；// element.offsetTop 指 element距离上方或上层控件的位置，整型，单位像素。// element.offsetLeft 指 element距离左方或上层控件的位置，整型，单位像素。// element.offsetWidth 指 element控件自身的宽度，整型，单位像素。// element.offsetHeight 指 element控件自身的高度，整型，单位像素。//clientHeigh = height + 上下padding//clientWidth = width+左右padding

实现完整代码

.to-do-list {position: relative; min-height: 600px; max-height: 600px; width: 600px; overflow: hidden; border: 2px solid black; .move-btn {position: absolute; }}

参考来源：用JavaScript实现div的鼠标拖拽效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。