文档章节

拖动效果

ycYinG
 ycYinG
发布于 2016/12/08 16:10
字数 457
阅读 1
收藏 0
点赞 0
评论 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

Android实现类似QQ的滑动删除效果

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

i_love_lu ⋅ 2016/03/04 ⋅ 0

类似 “花瓣” 主页的抽屉效果

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

红薯 ⋅ 2013/11/03 ⋅ 0

图片切割插件分步实现(一)

该插件是在窗口拖动效果的基础上实现的 当然,这不是最终版,只是一个勉强实现图片切割效果的不稳定版,还有bug,也还有功能未实现,我这样写只是为了把图片切割分成几个单独的功能,然后通过...

Oo-Space ⋅ 2014/12/26 ⋅ 0

ViewDragHelper详解

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

火云 ⋅ 2016/03/15 ⋅ 0

Lively TableView

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

匿名 ⋅ 2012/07/06 ⋅ 0

div js 拖动 怎样去除或修改鼠标的选择

http://blog.csdn.net/woshihw/article/details/6320485 像这里的代码~当拖动图层太快时就出现问题! 鼠标就会选择后面图层或其他图层的字体从而使拖动停止了~ 请问只用js的方法怎样解决这个...

爱星雾月 ⋅ 2012/08/25 ⋅ 2

android listview仿iphone特效 弹性listview

ios常见视图在顶部往下拉(下冲)或底部往上拉(上冲)有一个弹性回退的动画效果。著名的CM ROM和一些手机厂商也争相集成这种效果。android 从2.3开始实现了下冲到底部和上冲到顶部时颜色渐变动画...

少年追梦 ⋅ 2015/07/14 ⋅ 0

【Excel神技】之 快速填充

这个功能非常常用,最常用的方法应该是下面这样: ✔ 在鼠标放置单元格边缘,等待鼠标指针变成下图所示效果时(图示是PS的。。发现 截屏居然截不到那个图标)拖动即可实现填充。 拖动后效果如...

cheer_zhang ⋅ 02/08 ⋅ 0

jQuery UI draggable 拖动参数集合参考

使用jQuery UI这个js库可以很好的实现网页中元素的拖放效果,要想做出理想的拖放功能,了解它的参数设置即可,参数也很简单易懂。 下面的参数集合来自网上的文章,摘录过来以便使用。 官方介...

僵尸猫 ⋅ 2013/02/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

VS2015配置并运行汇编(一步一步照图做)【vs2017的链接在最后】

x64: TITLE Add and Subtract (AddSub.asm) ; This program adds and subtracts 32-bit integers. ; Last update: 2/1/02 ;.MODEL flat,stdcall x64 not su......

simpower ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

你真的明白RPC 吗?一起来探究 RPC 的实质

你真的明白RPC 吗?一起来探究 RPC 的实质 不论你是科班出身还是半路转行,这么优秀的你一定上过小学语文,那么对扩句和缩句你一定不陌生。缩句就是去除各种修饰提炼出一句话的核心,而不失基...

AI9o後 ⋅ 昨天 ⋅ 0

z-index设置失效?

今天碰到了一个问题,就是在给li设置提示框的时候,有用到遮罩效果,本来想把对应的出现在最顶层,可是不管将li设置的z-index值设为多大,li都没有出现在遮罩层之上。 我在网上查了z-index设...

IrisHunag ⋅ 昨天 ⋅ 0

CyclicBarrier、CountDownLatch以及Semaphore使用及其原理分析

CyclicBarrier、CountDownLatch以及Semaphore是Java并发包中几个常用的并发组件,这几个组件特点是功能相识很容易混淆。首先我们分别介绍这几个组件的功能然后再通过实例分析和源码分析其中设...

申文波 ⋅ 昨天 ⋅ 0

Java对象的序列化与反序列化

Java对象的序列化与反序列化

Cobbage ⋅ 昨天 ⋅ 0

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 昨天 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部