JavaScript实现网页对象拖放功能的方法
更新时间：2015年04月15日 10:47:00 作者：gogo
这篇文章主要介绍了JavaScript实现网页对象拖放功能的方法,涉及javascript针对浏览器的判断、事件爱你的添加与移除等相关操作技巧,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
大家在日常开发的时候经常要用到日期格式的处理，下面这篇文章主要给大家介绍了js中常规日期格式处理、月历渲染及倒计时函数,有需要的朋友可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要为大家详细介绍了js canvas仿支付宝芝麻信用分仪表盘,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了webpack踩坑之路图片的路径与打包，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
js和jq的event对象大同小异，本文简单对比下它们的'click'事件下的不同和应用，给有需要的小伙伴参考下2014-11-11
这篇文章主要介绍了JS简单实现表格排序功能,涉及javascript针对页面元素的遍历、判断与排序相关操作技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了微信小程序按钮去除边框线分享页面功能，文中通过一段简单的代码给大家介绍了微信小程序的button去边框的方法，感兴趣的朋友跟随脚本之家小编一起看看吧2018-08-08
以下是从网上找到的一段JavaScript实现图形报表的代码，对于想客户端显示报表的朋友可以参考下。2009-12-12
这篇文章主要给大家介绍了关于微信小程序实现导航功能的操作步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
下面小编就为大家带来一篇js智能获取浏览器版本UA信息的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
最新评论