提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了。可以用鼠标任意拖拽着一个物体到任何你想去的地方。

  最早拥有JavaScript拖拽功能的是IE4浏览器。当时,网页中只有两种对象是可以拖拽的,那就是:图形和某些文字。拖拽图像的时候,把鼠标放在图像上,按住鼠标不放就可以拖拽了。拖拽文字时,要先选中文字,然后可以像拖动图像那样拖拽选中的文字。在IE4中,唯一有效的放置拖拽文字的目标是文本框。到了IE5.5更进一步,让网页中的任何元素都可以拖拽(IE6以上也支持这些功能了)。随着浏览器一点点更新换代,随着IE7IE8以及其他浏览器的诞生,网页中所有东西都可以拖拽了,只不过是通过JavaScript程序来实现的。下面就是没有HTML5的时候,拖拽的实现小例子。

  HTML代码

  1. <div id="div1" style="width:100px; height:100px; background:red; position:absolute;">梦龙小站</div>

  JavaScript代码

  1. window.onload = function(){
  2. var oDiv = document.getElementById('div1');
  3. var disX = 0;
  4. var disY = 0;
  5. oDiv.onmousedown = function(ev){
  6. var ev = ev || window.event;
  7. disX = ev.clientX - oDiv.offsetLeft;
  8. disY = ev.clientY - oDiv.offsetTop;
  9. //在IE下,如果选中元素拖拽就会有问题 : IE设置全局捕获:setCapture 释放全局捕获:releaseCapture
  10. if(oDiv.setCapture){
  11. oDiv.setCapture();
  12. }
  13. document.onmousemove = function(ev){
  14. var ev = ev || window.event;
  15. oDiv.style.left = ev.clientX - disX + 'px';
  16. oDiv.style.top = ev.clientY - disY + 'px';
  17. };
  18. document.onmouseup = function(){
  19. document.onmousemove = null;
  20. document.onmouseup = null;
  21. if(oDiv.releaseCapture){
  22. oDiv.releaseCapture();
  23. }
  24. };
  25. //在标准浏览器下如果拖拽一个空的标签,就会有问题 : return false
  26. //在标准浏览器下拖拽图片会有问题:return false
  27. return false;
  28. };
  29. };

  CSS代码

  1. li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
  2. #div1{ width:100px; height:100px; background:red; margin:300px;}

  直到HTML5的出现。HTML5是以IE为基础制定了拖拽规范。支持原生拖拽的浏览器有:Chrome、Safari 3+和Firefox 3.5+。

  HTML5中的拖拽,可以在窗口间、框架间,甚至在应用间进行完美拖拽。浏览器对拖拽的支持为实现这一功能实现了便利。

  HTML5实战与剖析之原生拖拽(一)——拖拽历史概述,就为大家介绍到这里了。有了HTML5拖拽,就可以实现很多非常绚丽的效果了。更过有关HTML5的更新敬请关注梦龙小站。

HTML5实战与剖析之原生拖拽(一拖拽历史概述)的更多相关文章

  1. HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)

    可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...

  2. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)(转)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  3. (转)HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  4. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  5. HTML5实战与剖析之字符集属性(charset和defaultCharset)

    HTML5对字符集属性也进行了更新,其中charset和defaultCharset属性就是HTML5中新添加的字符集属性.有关charset和defaultCharset属性的具体讲解尽在HTML5 ...

  6. HTML5实战与剖析之媒体元素(6、视频实例)

    HTML5中的视频标签和及其模仿视频播放器的效果在一些手机端应用比較多.由于手机端基本上废除了flash的独断.让HTML5当家做主人,所以对视频支持的比較好. 所以今天专门为大家奉上HTML5视频标 ...

  7. HTML5实战与剖析之媒体元素(3、媒体元素的事件及方法)

    HTML5中的媒体元素除了拥有非常多的属性之外,video标签和audio标签还能够出发非常多事件和方法. 这些方法监控着不同的属性的变化,这些变化有可能是媒体播放的结果,也可能是用户操作媒体的结果. ...

  8. HTML5实战与剖析之媒体元素

    随着HTML5的到来,flash在手机端全部不能得到支持,这就使一项以flash制作的音乐播放和视频播放只能用HTML5中的媒体标签video标签和audio标签来制作了.很恰巧的是,移动端对HTML ...

  9. HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

随机推荐

  1. 通过socket实现多个连接并实现ssh功能

    一.前言 上一篇中我们已经知道了客户端通过socket来连接服务端,进行了一次数据传输,那如何实现客户端多次发生数据?而服务端接受多个客户端呢? 二.发送中文信息 在python3中,socket只能 ...

  2. 1.redis设计与实现--简单动态字符串

    1.redis没有使用c语言的字符串表示,而是使用更加适合自己的SDS(simple dynamic string),简单动态字符串,结构如下: 2.sys与c字符串的对比: 3.总结: redis采 ...

  3. 千里之行始于足下,node.js 资源中文导航

    响应@jiyinyiyong 号召,cnodjs 好的资源蛮多的,的确欠缺分类,在一群FAQ中,的确很容易沉下去,根据自己对node.js的理解,做成一个资源导航,PS:如果觉得合适,希望能够合并的c ...

  4. Laravel 5.4 migrate时报错: Specified key was too long error

    Laravel 5.4默认使用utf8mb4字符编码,而不是之前的utf8编码.因此运行php artisan migrate 会出现如下错误: [Illuminate\Database\QueryE ...

  5. 移动端meta声明

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --><html lang="zh-cmn-Hans"> ...

  6. hdu 2063 过山车 二分匹配(匈牙利算法)

    简单题hdu2063 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2063 过山车 Time Limit: 1000/1000 MS (Java/Ot ...

  7. Mac 下安装 ruby 环境解决 brew 安装 yarn 问题

    在brew安装yarn提示 ruby的版本过低.在网上搜了一下发现 1. mac下自带的ruby 在 system 目录下 2. 其实可以用brew安装一个ruby brew install ruby ...

  8. imperva agent 的重新注册

    情况是这样 公司搭了一个环境有mysql的数据库并且安装了agent,imperva管理平台上也可以看到agent的注册信息,但是没想到的是有人把我的虚机给还原快照了,而且还没保存..... 这次写个 ...

  9. Ubuntu16.04安装记

    Ubuntu16.04安装记 基本信息: 华硕笔记本 Windows 10 家庭版 处理器:Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz 2.71GHz 已安装的内 ...

  10. 「pycaffe指南」使用caffe的NetSpec.py中的Python接口自动生成×.prototxt文件

    https://www.jianshu.com/p/1a420445deea 作者:MapReducer 链接:https://www.jianshu.com/p/1a420445deea 來源:简书 ...