本例是在vue中实现的拖动功能,但是基本思想是一样的。主要是根据mousedown、mousemove、mouseup三个事件,结合元素的offsetLeft和el.style.left属性实现。
顺便记录一下两者的区别:
1. offsetLeft总的来说是获取当前元素距父元素左侧的值 ,具体分两种情况:
如果当前元素仍在普通流中(即position值为static或者relative),offsetLeft获取的是当前元素距流中父元素左侧的值,包括父元素的padding-left、margin-left、border-left,注:IE下有误差;
如果当前元素已从普通流中删除,使用了绝对定位absolute或固定定位fixed,offsetLeft获取的是当前元素距已定位的父元素左侧的值,即left+当前元素的margin-left。
2. style.left的元素需要自身设置了定位才能生效,获取或设置当前元素相对于已定位的父元素左侧的距离,仅仅是内联样式中的left值;但当元素的position为relative时,style.left指的是相对于该元素在流中原有位置左上角的左边距离。
3. offsetLeft和style.left的区别
style.left返回值为字符串,如”21px”,offsetLeft返回值为数值,如28;
style.left可获取也可设置,offsetLeft只可读;
style.left需事先在内联样式中定义,否则在js中获取到的值为空。
实现方式:
1:给元素设置mousedown、mousemove、m