文档章节

拖动效果

ycYinG
 ycYinG
发布于 2016/12/08 16:10
字数 457
阅读 1
收藏 0

####主要完成效果: 当鼠标 在div#box内按下去并且移动鼠标,要求div#box跟着鼠标移动 ####主要思路: 1.将div进行绝对定位 2.已知鼠标坐标点的改变和鼠标相对于div#box的位置,获取div#box距离页面的边距
3.计算出div相对于页面的距离,将他赋值给left和top ####html代码实现 <div id="box"></div> ####css代码实现 #box { width: 300px; height: 300px; background: #ddd; position: absolute; top: 0; left: 0; } ####js代码实现 var box = document.getElementById('box'); //获取对象 #####(1)鼠标按下事件 box.onmousedown = function(ent) { // 1.先获取鼠标在div#box内的相对位置 var e = ent || event; // 兼容性 // 1.1 获取鼠标在当前页面的坐标点 var mx = e.pageX; var my = e.pageY; // 1.2 获取div距离页面的左边距和上边距 var left = box.offsetLeft; var top = box.offsetTop; // 1.3 获取鼠标在div#box内相对位置 var x = mx - left; var y = my - top;

    //2 重新获取相对位置
    // 鼠标移动事件
    document.onmousemove = function(ment) {
        var me = ment || event;
        // 2.1 重新获取鼠标相对于页面的坐标点
        var new_x = me.pageX;
        var new_y = me.pageY;
        // 2.2 获取div#box的偏移值
        var new_left = new_x - x;
        var new_top = new_y - y;
        //2.3获取div#box可以走动的最大横向距离以及最大纵向距离
        var totalWidth = document.documentElement.clientWidth - box.offsetWidth;  // div#box可以走动的最大横向距离:浏览器的总宽度-自身宽度
        var totalHeight = document.documentElement.clientHeight - box.offsetHeight;  // div#box可以走动的最大纵向距离:浏览器的总高度-自身高度
        // 2.4 判断获取的偏移值不能出浏览器
        if (new_left <= 0) {
            new_left = 0;
        } else if (new_left >= totalWidth) {
            new_left = totalWidth;
        }
        if (new_top <= 0) {
            new_top = 0;
        } else if (new_top >= totalHeight) {
            new_top = totalHeight;
        }
        // 2.5 将获取的结果赋值给div#box
        box.style.left = new_left + 'px';
        box.style.top = new_top + 'px';
    }
     }

#####(2) 鼠标抬起事件 box.onmouseup = function() { // 当抬起鼠标的时候,停止移动 document.onmousemove = null; }

© 著作权归作者所有

共有 人打赏支持
上一篇: 延时加载
下一篇: 简单轮播特效
ycYinG
粉丝 1
博文 10
码字总数 4889
作品 0
昌平
程序员
私信 提问
vc++ mfc中拖动效果的实现 借助于CImageList

vc++ mfc中拖动效果的实现 借助于CImageList 拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道。纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做...

yousss
04/18
0
0
类似 “花瓣” 主页的抽屉效果

实现类似 “花瓣” 主页的抽屉效果。向下滚动列表拉出大图展示,向上滚动隐藏大图展示。 该代码实现了两种效果。第一种效果是:视图刚加载时,view1隐藏在视图的顶部,当往下拖动scrollView时...

红薯
2013/11/03
1K
0
Android实现类似QQ的滑动删除效果

观察QQ的滑动删除效果,可以猜测可以滑动删除的部分主要包含两个部分,一个是内容区域(用于放置正常显示的view),另一个是操作区域(用于放置删除 按钮)。默认情况下,操作区域是不显示的...

i_love_lu
2016/03/04
68
0
Lively TableView

自定义列表拖动、滑动的各种动画效果。用户用手指拖动列表,列表下方或者上方会产生自定义的动画效果,包括风扇效果(Fan)、卷边效果(Curl)、波浪效果(Wave)、逐渐变淡效果(Fade)等等...

匿名
2012/07/06
358
0
ViewDragHelper详解

2013年谷歌i/o大会上介绍了两个新的layout: SlidingPaneLayout和DrawerLayout,现在这俩个类被广泛的运用,其实研究他们的源码你会发现这两个类都运用了ViewDragHelper来处理拖动。ViewDra...

火云
2016/03/15
34
0

没有更多内容

加载失败,请刷新页面

加载更多

C#匿名委托

list自定义排序 //list自定义排序public static List<string> sortList(List<string> m_str,string splitStr) //a b表示列表中的元素{String[] strArray=m_str.ToArray();......

青衣霓裳
14分钟前
0
0
Python 之父退位后,会有新任终身仁慈独裁者吗?怎么产生?

随着 Python 之父 Guido van Rossum 逐步卸任 BDFL,Python(CPython)的未来之路牵动了万千开发者的心。没了首领,Python 今后的发展会怎么样?社区将如何运作?谁来领导 Python 这门语言和...

编辑部的故事
19分钟前
6
0
我的Linux系统九阴真经

在今天,互联网的迅猛发展,科技技术也日新月异,各种编程技术也如雨后春笋一样,冒出尖来了。各种创业公司也百花齐放百家争鸣,特别是针对服务行业,新型互联网服务行业,共享经济等概念的公...

linux-tao
今天
20
0
MySQL: Starting MySQL….. ERROR! The server quit without updating PID file

前段时间打包了一个数据库镜像,但是启动容器之后发现报错 ··· ··· MySQL: Starting MySQL….. ERROR! The server quit without updating PID file 查了网络上的解决方案比较全,遂转帖...

blackfoxya
今天
6
0
C4C销售订单行项目价格维护方法

需求很简单,能够创建销售订单,在行项目里添加产品,带出价格来,同时把总价显示在销售订单抬头区域。 如下图所示: 下面是具体配置。 Business Configuration里,点击Sales Order的配置: ...

JerryWang_SAP
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部