JavaScript实现网页对象拖放功能的方法


Posted in Javascript onApril 15, 2015

本文实例讲述了JavaScript实现网页对象拖放功能的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Drag</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
#myDiv{width:50px; height:50px; background-color:red}
</style>
</head>
<body>
<div id="myDiv"></div>
</body>
<script type="text/javascript">
 var isIE = document.all ? true : false;
 //判断是否是IE浏览器
 function addEventHandler(oTarget, sEventType, fnHandler){
 //添加事件
 if(oTarget.addEventListener){
 oTarget.addEventListener(sEventType, fnHandler, false);
 }else if(oTarget.attachEvent){
 oTarget.attachEvent("on" + sEventType, fnHandler);
 }else{
 oTarget["on" + sEventType] = fnHandler;
 }
 }
 function removeEventHandler(oTarget, sEventType, fnHandler) {
 //移除事件
 if (oTarget.removeEventListener) {
 oTarget.removeEventListener(sEventType, fnHandler, false);
 } else if (oTarget.detachEvent) {
 oTarget.detachEvent("on" + sEventType, fnHandler);
 } else {
 oTarget["on" + sEventType] = null;
 }
 }
 var BindAsEventListener = function(object, fun) {
 //以另一个对象替换当前对象
 return function(event) {
 return fun.call(object, (event || window.event));
 }
 }
 var $ = function(id){
 return document.getElementById(id);
 }
 var Class = {
 create: function() {
 return function() {this.initialize.apply(this, arguments);}
 }
 }
 var drag = Class.create();
 drag.prototype = {
 initialize: function(id){//初始化
 this._drag = $(id);
 this._flag = false;
 addEventHandler(this._drag,'mousedown',BindAsEventListener(this,this.start));
 this._fM = BindAsEventListener(this, this.move);
 this._fS = BindAsEventListener(this, this.stop);
 this._drag.style.position = "absolute";
 },
 start: function(oEvent){//相当于onmousedown事件
 //return this._name;
 this._x = oEvent.clientX - this._drag.offsetLeft;
 this._y = oEvent.clientY - this._drag.offsetTop;
 addEventHandler(document, 'mousemove', this._fM);
 addEventHandler(document, 'mouseup', this._fS);
 if(isIE){
  addEventHandler(this._drag, "losecapture", this._fS);
 //焦点丢失
  this._Handle.setCapture();//设置鼠标捕获
 }else{
  addEventHandler(window, "blur", this._fS);//焦点丢失
  oEvent.preventDefault();//阻止默认动作
 }
 },
 move: function(oEvent){ //相当于onmonusemove事件
 this._drag.style.left = oEvent.clientX - this._x + "px";
 this._drag.style.top = oEvent.clientY - this._y + "px";
 },
 stop: function(){ //相当于onmouseup事件
 removeEventHandler(document, 'mousemove', this._fM);
 removeEventHandler(document, 'mouseup', this._fS);
 if(isIE){
  removeEventHandler(this._drag, "losecapture", this._fS);
  this._Handle.releaseCapture();
 }else{
  removeEventHandler(window, "blur", this._fS);
 }
 }
 }
 var ndrag = new drag("myDiv");
</script>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
JS解决url传值出现中文乱码的另类办法
Apr 08 Javascript
js将当前时间格式转换成时间搓(自写)
Sep 26 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
jquery实现图片按比例缩放示例
Jul 01 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 #Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 #Javascript
JavaScript中window.open用法实例详解
Apr 15 #Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 #Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 #Javascript
JavaScript表格常用操作方法汇总
Apr 15 #Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 #Javascript
You might like
基于mysql的bbs设计(四)
2006/10/09 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php 数据库字段复用的基本原理与示例
2011/07/22 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
PHP可变函数学习小结
2015/11/29 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
python学生管理系统开发
2019/01/30 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
公司活动策划方案
2014/01/13 职场文书
超市促销活动方案
2014/03/05 职场文书
计生专干事迹
2014/05/28 职场文书
校园安全标语
2014/06/07 职场文书
中秋晚会活动方案
2014/08/31 职场文书
2016年五一促销广告语
2016/01/28 职场文书
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技