vue拖拽功能

原创 星辰杰 随笔 vue组件 407阅读 2017-12-07 21:39:03 举报

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
*{
margin: 0;
padding:0;
}

demo{

        position: relative;
    }
    #demo div{
        width:200px;
        height: 200px;
        background:red;
        position:absolute;
    }
</style>
<body>
    <div id="demo">
        <div v-col></div>
        <div v-col></div>
    </div>
</body>
<script type="text/javascript">
    var vm=new Vue({
        el:'#demo',
        directives:{
            'col':function(el,bindding){
                el.onmousedown=function(e){
                    var evt=e||event
                    var ox=evt.clientX-el.offsetLeft;
                    var oy=evt.clientY-el.offsetTop;

                document.onmousemove=function(e){
                    var evt=e||event;
                    var oxx=evt.clientX-ox;
                    var oyy=evt.clientY-oy;

                    el.style.left=oxx+'px';
                    el.style.top=oyy+'px';
                }

                document.onmouseup=function(e){

                    document.onmousedown=null;
                    document.onmousemove=null;
                }

                }
            }
        }
    })
</script>

</html>

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复