zoukankan      html  css  js  c++  java
  • 拖拽效果实现原理

      拖拽,主要用到onmousedown、onmouseover、onmouseup

      拖拽的流程:(1)先点击

            (2)在点下的物体被选中,进行move移动

            (3)抬起鼠标,停止移动

      【注】点击某个物体时,用oDiv即可,move和up是全局区域,也就是整个文档通用,应该用document。

      

        oDiv.onmousedown = function(){
            document.onmousemove = function(){
                var e = e || window.event;
                var diffX = e.clientX - oDiv.offdsetLeft;
                var diffY = e.clientY - oDiv.offdsettop;
    
                var _this = this;
    
                _this.style.left = e.clientX - diffX + 'px';     // 鼠标点击哪里就可以从哪里开始拖拽
                _this.style.top = e.clientY - diffY + 'px';
            }
            document.onmouseup = function(){
                this.onmousemove = null;
                this.onmouseup = null;
            }
        }

      

                                     未完待续......^^

  • 相关阅读:
    java web数据可视化
    全国疫情统计可视化地图
    数组中的学问
    软件工程第二周开课博客
    梦断代码阅读笔记1
    补充urllib
    多用户登录
    学期课后个人总结
    团队冲刺第二十六天
    团队冲刺第二十五天
  • 原文地址:https://www.cnblogs.com/tracylyx/p/drag.html
Copyright © 2011-2022 走看看