vue实现鼠标拖拽事件（并解决拖拽与点击事件的冲突问题）_综合

html部分

<body>
<div class="new-wrapper fullPage" ref="fullPage" id="app" v-cloak><div class="returnTop" ref="returnTop"@click="returnTop" v-show="showReturnTop" @mousedown.stop="dragMove"></div>
</div>
</body>

css部分

.returnTop{color: #fbb810;text-align: center;position: fixed;right:30px;bottom:22px;cursor:pointer;z-index: 2;width:60px;height:60px;background: url(<%=basePath%>images/returnTop.png) no-repeat;background-size: 100% 100%;
}

js部分

new Vue({el: '#app',data: {//拖拽返回顶部positionX:0,positionY:0,},methods:{//点击返回顶部returnTop:function(){var isDrag = this.$refs.returnTop.getAttribute('drag-flag');if (isDrag === 'true') {return false;}else{this.directToMove(1,'pre');};},//拖拽返回顶部dragMove:function(e){var dragStartTime = '';var dragEndTime = '';var target = e.target;        target.setAttribute('drag-flag', false);dragStartTime = new Date().getTime()//鼠标相对元素的位置var disX = e.clientX - target.offsetLeft;var disY = e.clientY - target.offsetTop;document.onmousemove = function(e){       //元素的位置var left = e.clientX - disX;    var top = e.clientY - disY;this.positionX = top;this.positionY = left;target.style.left = left + 'px';target.style.top = top + 'px';dragEndTime = new Date().getTime();if (dragEndTime - dragStartTime > 200) {target.setAttribute('drag-flag', true)};};document.onmouseup = function(e) {document.onmousemove = null;document.onmouseup = null;};},},
});