可以拖动的DIV层，Drag-and-drop拖放效果代码

发布时间：2018-09-14 10:28:07 所属栏目：Unix 来源：站长网

导读：可以拖动的DIV层，Drag-and-drop拖放效果代码。一个简化版的网页拖放效果-Drag-and-drop，如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。程序的原型是在做图片切割效果的时候做出来的，希望大家通过本例对拖放特效的实现有一个大致的掌握。

　　可以拖动的DIV层，Drag-and-drop拖放效果代码。一个简化版的网页拖放效果-Drag-and-drop，如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。程序的原型是在做图片切割效果的时候做出来的，希望大家通过本例对拖放特效的实现有一个大致的掌握。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>简易拖放效果</title> </head> <body> <script> var isIE = (document.all) ? true : false; var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } } } var Extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } } var Bind = function(object, fun) { return function() { return fun.apply(object, arguments); } } var BindAsEventListener = function(object, fun) { return function(event) { return fun.call(object, (event || window.event)); } } 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 SimpleDrag = Class.create(); SimpleDrag.prototype = { //拖放对象,触发对象 initialize: function(drag) { this.Drag = $(drag); this._x = this._y = 0; this._fM = BindAsEventListener(this, this.Move); this._fS = Bind(this, this.Stop); this.Drag.style.position = "absolute"; addEventHandler(this.Drag, "mousedown", BindAsEventListener(this, this.Start)); }, //准备拖动 Start: function(oEvent) { this._x = oEvent.clientX - this.Drag.offsetLeft; this._y = oEvent.clientY - this.Drag.offsetTop; addEventHandler(document, "mousemove", this._fM); addEventHandler(document, "mouseup", this._fS); }, //拖动 Move: function(oEvent) { this.Drag.style.left = oEvent.clientX - this._x + "px"; this.Drag.style.top = oEvent.clientY - this._y + "px"; }, //停止拖动 Stop: function() { removeEventHandler(document, "mousemove", this._fM); removeEventHandler(document, "mouseup", this._fS); } }; </script> <div id="idDrag" style="border:5px solid #0000FF; background:#C4E3FD; width:50px; height:50px;"></div> <script> new SimpleDrag("idDrag"); </script> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!