vue拖拽练习

<html>
<head>
    <title>title>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue_2.js">script>
head>
<body>
    <div id="box">
    <-- 自定义指令 v-drag -->
        <div v-drag :style="{position:'absolute',
        width:'100px',
        height:'100px',
        background:'red'}">div>

        <div v-drag :style="{position:'absolute',
        width:'100px',
        height:'100px',
        background:'blue'}">div>
    div>
body>
html>

<script type="text/javascript">
    // 自定义元素指令
    Vue.directive('drag',function(){
        var box = this.el;
        box.onmousedown = function(ev){
            var disX = ev.clientX - box.offsetLeft;
            var disY = ev.clientY - box.offsetTop;

            document.onmousemove = function(ev){
                var l = ev.clientX - disX;
                var t = ev.clientY - disY;
                box.style.left = l + "px";
                box.style.top = t + "px";
            };
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    });
    new Vue({

    }).$mount("#box");
script>

你可能感兴趣的:(vue练习)