js用MVC模式自定义拖拽功能

最新推荐文章于 2024-07-06 15:59:28 发布

weixin_33726943

最新推荐文章于 2024-07-06 15:59:28 发布

阅读量125

点赞数

文章标签：测试 python javascript ViewUI

原文链接：https://my.oschina.net/u/2879089/blog/861053

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
       #box{
           position: absolute;
           width: 100px;
           height: 100px;
           background: #000;
       }
   </style>
</head>
<body>
   <div id="box"></div>
</body>
<script type="text/javascript">

   var obj = {
       data: { //设置公共变量
           oTop:0,
           oLeft:0,
           flag:false
       },
       controller: { //控制器里的鼠标事件
           init: function(){ //初始化函数
               var box = document.getElementById("box");
               this.mousedown(box);
               this.mousemove(box);
               this.mouseup();
           },
           mousedown:function(ele){
               ele.onmousedown = function(e){
                   e = event || window.event;
                   obj.data.oTop = e.screenY - ele.offsetTop;
                   obj.data.oLeft = e.screenX - ele.offsetLeft;
                   obj.data.flag = true;
               }
           },
           mousemove: function(ele){
               document.onmousemove = function(e){
                   e = event || window.event;
                   if (obj.data.flag) {
                       var mH = parseInt(e.screenY - obj.data.oTop);
                       var ml = parseInt(e.screenX - obj.data.oLeft);
                       obj.view.show(ele,mH,ml);
                   }
               }
           },
           mouseup: function(){
               document.onmouseup = function(){
                   obj.data.flag = false;
               }
           }
       },
       model: { // 模型里没有数据的操作因此不用写

       },
       view: { //视图的展示
           show: function(ele,y,x){
               ele.style.top = y +'px';
               ele.style.left = x +'px';
           }
       }
   }
   obj.controller.init();
</script>
</html>