<template>
	<!-- 二维码 -->
	<div class="qrcodebox">
		<div ref="element"  v-drag draggable="false"  id="box" class="box " style="z-index: 999; position: absolute; width: 300px; height: 286px; top: 191px; left: 616px;">
		    <span style="font-size: 18.75px;text-align: center;color: #fff;">请扫码参与活动</span>
		    <img src="@/assets/news/qrcode.png" alt="活动二维码" title="活动二维码" class="qrcode">
		    <div id="coor" class="coor coor-right-bottom" style="display: block; top: 304px;"></div>
		    <div class="coor coor-bottom" style="display: block; top: 304px;"></div>
		    <div class="coor coor-right" style="display: block; top: 161px;"></div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				dd:"",
				inout:""
			}
		},
		//自定义指令
		directives: {
		    drag(el){
		        let oDiv = el; //当前元素
		        let self = this; //上下文
		        //禁止选择网页上的文字
		        document.onselectstart = function() {
		            return false;
		        };
		        oDiv.onmousedown = function(e){
		            //鼠标按下，计算当前元素距离可视区的距离
		            let disX = e.clientX - oDiv.offsetLeft;
		            let disY = e.clientY - oDiv.offsetTop;
		            document.onmousemove = function(e){
		                //通过事件委托，计算移动的距离
		                let l = e.clientX - disX;
		                let t = e.clientY - disY;
		                //移动当前元素
		                oDiv.style.left = l + "px";
		                oDiv.style.top = t + "px";
		            }
		            document.onmouseup = function(e){
		                document.onmousemove = null;
		                document.onmouseup = null;
		            };
		            //return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效
		            return false;
		        };
		    }
		}
	}
</script>

<style>
	.qrcodebox{
		text-align: center;
	}
	#box {
	    width: 120px;
	    cursor: move;
	    position: absolute;
	    top: 60px;
	    right: 60px;
	    color: #fff;
	    text-align: center;
	    z-index: 999;
	}
	#box img {
	    width: 100%;
	    height: 100%;
	}
</style>
