写一个兼容性比较好的拖拽DEMO

查看Demo

思路

  1. div盒子
  2. 鼠标按下事件onmousedown
  3. 鼠标移动事件onmousemove,获得鼠标的坐标,将div移动至鼠标的当前坐标
  4. 鼠标抬起事件omouseup,清除鼠标移动事件和鼠标抬起事件

布局和代码

<style>
#div1 {
background: rgb(40,40,40);
width: 100px;
height: 100px;
position: absolute;
color: #fff;
}
</style>

<body>
实例文字实例文字实例文字实例文字
<div id="div1">实例文字</div>
实例文字实例文字实例文字实例文字
<script>
window.onload = function() {
drag("div1");
}
function drag(id) {
var oDiv = document.getElementById(id); oDiv.onmousedown = function(ev) {
var oEvent = event || ev;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
oDiv.style.cursor = "move"; // for IE
if (oDiv.setCapture) {
oDiv.onmousemove = fnMove;
oDiv.onmouseup = fnUp;
oDiv.setCapture();
} else { document.onmousemove = fnMove;
document.onmouseup = fnUp;
} function fnMove(ev) {
var oEvent = event || ev;
var l = oEvent.clientX - disX;
var t = oEvent.clientY - disY; // 磁性吸附
if (l < 50) {
l = 0;
} else if (l > document.documentElement.clientWidth - oDiv.offsetWidth-50) {
l = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if (t < 50) {
t = 0;
} else if (t > document.documentElement.clientHeight - oDiv.offsetHeight-50) {
t = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = l + 'px';
oDiv.style.top = t + 'px'; };
function fnUp() {
this.onmousemove = null;
this.onmouseup = null;
if (this.releaseCapture) {
this.releaseCapture();
}
}
return false; // 阻止文字选中
}
}
</script>

DEBUG

  • 当页面中有其他元素的时候,鼠标拖拽时,会默认地去选中其他的诸如文字之类的东西,布局中的“实例文字”就是为此准备的。我们可以加入return false来解决掉很多浏览器默认事件,在这里就有一个很好的应用
  • 微软的IE总是有自己的一套,这给js兼容带来了很大的麻烦,上述的bug解决方法在IE6下根本无效,因此这里引入了IE特有的setCapture(),IE中,假设id为div1一个元素设置了setCapture(),然后再绑定事件,比如一个点击事件,接下来,无论你点击哪里,被触发的都是div1元素的点击事件了,甚至你点击浏览器的地址栏,工具栏,都会触发div1的点击事件()。此时你的ie浏览器会像中毒一样,点击关闭按钮都是在触发div1的点击事件(),其他元素不管在div之上还是之下的,他们绑定的点击事件全部失效。
  • 这里刚好可以运用IE的setCapturereleaseCapture,当鼠标的div1上按下时,为div1 setCapture,这时所有的事件都集中到了div1身上,捕获所有事件,再也不会去选中其他的元素了,在鼠标抬起后,运用releaseCapture,不再捕获。

写一个兼容性比较好的拖拽DEMO的更多相关文章

  1. 缩放系列(三):一个可以手势缩放、拖拽、旋转的layout

    弄了一个下午,终于搞出来了,PowerfulLayout 下面是一个功能强大的改造的例子: 可以实现以下需求: 1.两个手指进行缩放布局 2.所有子控件也随着缩放, 3.子控件该有的功能不能丢失(像b ...

  2. angular ng-repeat+sortable 拖拽demo

    由于项目需求,需要使用angular 实现列表的增.删.改,并且列表支持拖拽. 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能. 我现在懒得想 ...

  3. iOS 创建一个可以点击并拖拽的Button

    HSCButton.h #import <UIKit/UIKit.h> @interface HSCButton : UIButton { CGPoint beginPoint; } @p ...

  4. 移动端拖拽(模块化开发,触摸事件,webpack)

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...

  5. 自己写一个jqery的拖拽插件

    说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件 先 ...

  6. [转自大神]js拖拽小总结

    https://blog.csdn.net/u013040887/article/details/83059094 权侵删 这里写的是一个原生js实现拖拽的效果,首先: 1.实现拖拽的三大事件,是要首 ...

  7. canvas drag 实现拖拽拼图小游戏

    博主一直心心念念想做一个小游戏-  前端时间终于做了一个小游戏,直到现在才来总结,哈哈- 以后要勤奋点更新博客! 实现原理 1.如何切图? 用之前的方法就是使用photoshop将图片切成相应大小的图 ...

  8. MVVM模式下实现拖拽

    在文章开始之前先看一看效果图 我们可以拖拽一个"游戏"给ListBox,并且ListBox也能接受拖拽过来的数据, 但是我们不能拖拽一个"游戏类型"给它. 所以 ...

  9. RecyclerView拖拽排序和滑动删除实现

    效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...

随机推荐

  1. QListWidget的QComboBox下拉列表添加复选框及消息处理

    要在QComboBox下拉列表项中添加复选框,并进行消息处理,在网上搜索了很久没有找到太多有用的信息和实际的例子,但从中还是找到了一些提示性的资料,根据这些简短的介绍,最终实现了这个功能. QComb ...

  2. Jmeter 笔记

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试但后来扩展到其他测试领域. 它可以用于测试静态和动态资源例如静态文件. ...

  3. wndows make images

    配置文件/etc/xen/mywindows.内容如下 import os, re arch_libdir = 'lib' arch = os.uname()[4] if os.uname()[0] ...

  4. mongoose查询特定时间段文档的方法

    db.collection.find({ time:{ "$gte": new Date('2014-01-24'), "$lte":new Date('201 ...

  5. HDU 4326Game(比较难理解的概率dp)

    Game Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Subm ...

  6. Open virtual effects in Ubuntu 12.04LTS

    Need install below packages: compiz compiz-core compiz-fusion-plugins-extra+ compiz-fusion-plugins-m ...

  7. 手把手教你在openshift上搭建wordpress博客(二)

    相同公布于:http://www.longgaming.com/archives/128 推荐前往阅读 这一篇文章主要介绍一些经常使用插件的使用和配置. 下面是我个人安装的一些插件.大家能够依据须要自 ...

  8. sql 分割字符串 存储过程

    默认是用 , 分割,如有需要可以自己更改 我写的是 循环插入数据 存储过程,也可以自己改成 方法使用 存储过程: ),@jrid int) as begin declare @location int ...

  9. iframe的一些简单记录

    //获取当前所在IFrame的id var frameId = window.frameElement && window.frameElement.id || ''; //Jquer ...

  10. 两个textarea 同时变化高度

    <html><head><script type="text/javascript" src="/jquery/jquery.js" ...