拖动效果，可以形象的帮助用户处理一些问题，比如Windows删除文件，只需将文件拖动至回收站即可。比起右键显得更形象，我觉得更好玩一点^_^。当然，在其他许多方面，其实也有用到拖动效果，只是他们不是那么明显，以至于我们不容易觉察到。我是自娱自乐，写一个Web MusicPlayer的时候开始对拖动有所构思，因为需要做个左右一定范围内拖动的按钮，来改变Music文件的播放进度。

　　不多说了，下面我们来进入本篇的正题。

　　需要的组件：我们先来理一下简化后的拖动模型，只需要一个简单的于body中一个普通的div。他的大小应该适中，这样在看其相对鼠标运动时更加清晰。

　　拖动触发的事件：1.mousedown　　2.mousemove　　3.mouseup

　　拖动过程：鼠标左键在div上单击触发mousedown事件，在mousedown事件之后，鼠标开始拖动动作，触发mousemove事件，注意，此时div应该跟随鼠标在body上移动。这就牵扯到拖动的组件div的left（左支撑），以及top（上支撑）的该变量。（当然也可以用right和bottom来反映，效果一样）。要获取鼠标移动情况，在mousedown事件（设为事件ed）之后，获取鼠标屏幕位置（ed.clientX，ed.clientY）;鼠标移动后mousemove事件（设为事件em）获取鼠标位置（em.clientX，em.clientY）;则鼠标移动在X，Y方向的分量也是div将要移动的分量为（em.clientX，em.clientY）-（ed.clientX，ed.clientY）=（em.clientX-ed.clientX,em.clientY-ed.clientY）;注意到得的值可能有负值情况，这种情况是不影响的。因为，如果我们假设鼠标相对（ed.clientX，ed.clientY）向右下移动至（em.clientX，em.clientY），若其中出现负值，相应的加号接变成了减号，也就是移动方向为假设方向的反方向，有实际意义，并不影响效果。现在，开始移动我们唯一的div，（在实际运行中，两者移动几乎是同步的，这里分开来说，只是便于理解），由上文我们知道div应该跟随鼠标向假设的方向右下移动（em.clientX-ed.clientX,em.clientY-ed.clientY）；要在js中获取组件div的left和top即初始位置（d.offsetLeft,d.offsetTop）(这里d=document.getElementById('div');),则只需在mousemove事件触发时，对div的left和top重新赋值即可跟随鼠标移动，所以移动后的div位置为（d.offsetLeft,d.offsetTop）+（em.clientX-ed.clientX,em.clientY-ed.clientY）=（d.offsetLeft+em.clientX-ed.clientX,d.offsetTop+em.clientY-ed.clientY）;这样，我们整个移动的过程就完成。

　　但是如果所有的事件监听器全部放在待拖动div组件上，你会发现这个div很“脆弱”，慢慢拖动div中心完全没事，但是，当点击div边缘拖动，或者拖动速度较快时，你会发现我们的辛辛苦苦做出的div玩去了，跑丢了。Q~Q。这是因为当mousemove触发时，div跟随鼠标移动，并非是完全同步的，他们之间是有很小的延时的。当我们拖动速度很快的时候，鼠标跑出了div的“领域”，而我们的mousedown是加在div上的，现在鼠标已经不在领域内，自然也就停下来了。鼠标和div分道扬镳。要避免这个问题，也就是当鼠标在div外移动时，div依然艰难的保持与鼠标同步运动。即，mousedown依然放在div上，而mousemove放在我们的最大的容器body上，这样，当鼠标位于div外时，div依然追随我们我行我素的鼠标。为了避免当移速过快时突然up鼠标左键情况（这时，我们鼠标即使没有down左键，当鼠标进入div时，div依然追随鼠标），mouseup也应该加在最大的容器body上，至此，我行我素的鼠标和至死不渝的div曲折的故事圆满收尾。

　　理清了思路下面就开始愉快的代码时间了。（为了粘贴方便，这里就不分开css，js了）

看一下效果http://dearvee.ccaeo.com/blog/move.html

2017-03-08  17:13:01

<!DOCTYPE html>

<html>

<head>

    <title>move</title>

</head>

<style type="text/css">

    .body_css{

        width: 100%;

        height: 100%;

        position: absolute;

    }

    .div_css{

        width: 100px;

        height: 100px;

        background-color: #0ff;

        position: absolute;

        left: 0px;

        top: 0px;

        color: #fff;

        user-select:none;

    }

</style>

<script type="text/javascript">

window.onload=function (){

var d = document.getElementById('div');

var b = document.getElementById('body');

d.addEventListener("mousedown", function(ed) {

    var flag=true;

    var dl=d.offsetLeft;

    var dt=d.offsetTop;

    b.addEventListener("mousemove",function(em){

        if(flag){

        d.style.left=dl+em.clientX-ed.clientX+"px";

        d.style.top=dt+em.clientY-ed.clientY+"px";

        }

    });

    b.addEventListener("mouseup",function(){

        flag=false;

    });

});

}

</script>

<body id="body" class="body_css">

<div id="div" class="div_css">你甩不掉我的<br>Q_Q</div>

</body>

</html>

Web组件流畅拖动效果的更多相关文章

  1. Web的鼠标拖动效果

    以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...

  2. [阿当视频]WEB组件学习笔记

    — 视频看完了,自定义事件还不懂,等完全懂了再更新并完成整篇案例 1. JS分层和组件的种类浏览器底层包括HTML CSS JS(DOM/BOM/Style/Canvas 2D/WebGl/SVG) ...

  3. HTML 通过js实现div的拖动效果

    最近做项目,碰到一个问题,需要对div实现拖动效果. 在度娘找了很多,要么觉得代码太长,要么就是效果不理想,不过最后还是找到了一个不错的,感谢大神的留贴,方便了我们,就把代码贴下面了: <!DO ...

  4. 【收藏】这么多WEB组件(CSS)，攒一个网站够了吧？

    简言 总是喜欢简单又精致的东西,美的不繁复也不张扬.这是闷骚程序员的癖好么?闲来无事,把收集到的部分WEB组件整理汇总一下,攒一个逼格高一点的网站够了吧? 1 表单(form)相关 1.1 输入框(i ...

  5. amazeui学习笔记二（进阶开发5）--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  6. Web 组件是什么

    Web 组件是什么 一.总结 这篇下面的内容多看 1.组件化的目的:高内聚,低耦合,便于多人同时开发 2.各种前端框架(前端组件化)让写前端不要太简单: 3.组件编程最最最最简单实例: <lin ...

  7. amazeui中内置的web组件有哪些且如何用

    amazeui中内置的web组件有哪些且如何用 一.总结 一句话总结: 1.组件还是jquery.js+amazeui.js,和插件一样,准确的说是amazeui.css+jquery.js+amaz ...

  8. 使用外部web组件-----easyUI、jQueryUI、Bootstrap、js正则表达式

    1.使用外部web组件,以Bootstrap为例 <head> <link rel='stylesheet'  href='bootstrap-3.3.0-dist/dist/css ...

  9. vc++ mfc中拖动效果的实现 借助于CImageList

    拖动是界面编程频繁使用的一个效果,在windows系统下可谓大行其道.纵观时下的应用软件几乎各个都支持各种各样拖动的效果,windows7更是把拖动做到了极致.其实说起来拖动的实现也很简单,对于有句柄 ...

随机推荐

  1. 16.Odoo产品分析 (二) – 商业板块(9) – 网站生成器(1)

    查看Odoo产品分析系列--目录 安装"电子商务"模块时,该模块会自动安装,但网站生成器是电子商务的前提,因此,先分析该模块,在下面就是对电子商务模块的分析. 1. 编辑网站 安装 ...

  2. Android 9.0更新

    北京时间2018年8月7日上午,Google 发布了 Android 9.0 操作系统.并宣布系统版本 Android P 被正式命名为代号"Pie". Android 9.0 利 ...

  3. Ehcache缓存配置以及基本使用

    在java项目广泛的使用.它是一个开源的.设计于提高在数据从RDBMS中取出来的高花费.高延迟采取的一种缓存方案.正因为Ehcache具有健壮性(基于java开发).被认证(具有apache 2.0 ...

  4. java集合继承关系图

    面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式. 数组虽然也可以存储对象,但长度是固定的:集合长度是可变的,数组中可以存储基 ...

  5. ES搜索引擎集群模式搭建【Kibana可视化】

    一.简介 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎(与Solr类似),基于RESTful web接口.Elasticsearch是用Ja ...

  6. java----堆区、方法区和栈区

    堆区:只存放类对象,线程共享: 方法区:又叫静态存储区,存放class文件和静态数据,线程共享; 栈区:存放方法局部变量,基本类型变量区.执行环境上下文.操作指令区,线程不共享; class A { ...

  7. Scrapy at a glance预览

    1.安装scrapy 2.创建爬虫项目 scrapy startproject test_scrapy 3.创建quotes_spider.py文件4.复制下面代码到quotes_spider.py文 ...

  8. .net的mvc的fw版本为4.5发布到阿里云【云虚拟主机】上.

    注意:云虚拟主机和云服务器(ECS)不是同一个产品,请注意分别. 云服务器ECS: 云虚拟主机: 我用的是云虚拟主机也是第二个,版本是window server  声明:默认,已经把域名[已备案]绑定 ...

  9. php配置文件php.ini的详细解析(续)

    file_uploads = On                                                                                 // ...

  10. C语言 投票系统：给定候选人，从键盘输入候选人的名字，统计票数，并输出最终获胜者

    投票系统:给定候选人名单,从键盘输入候选人的名字,统计票数,并输出最终获胜者.若投票人输入的名字不在其候选名单上,则该票数无效. //凯鲁嘎吉 - 博客园 http://www.cnblogs.com ...