Code666 (代码贴、代码片段)

[JavaScript] JavaScript实现的网页对象拖放功能代码 →→→→→进入此内容的聊天室

来自 , 2019-05-09, 写在 JavaScript, 查看 119 次.
URL http://www.code666.cn/view/91576cbf
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.     <head>
  4.         <title>Drag</title>
  5.         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  6.         <style>
  7.             #myDiv{width:50px; height:50px; background-color:red}
  8.         </style>
  9.     </head>
  10.  
  11.     <body>
  12.             <div id="myDiv"></div>
  13.     </body>
  14.     <script type="text/javascript">
  15.         var isIE = document.all ? true : false; //判断是否是IE浏览器
  16.         function addEventHandler(oTarget, sEventType, fnHandler){ //添加事件
  17.             if(oTarget.addEventListener){
  18.                 oTarget.addEventListener(sEventType, fnHandler, false);
  19.             }else if(oTarget.attachEvent){
  20.                 oTarget.attachEvent("on" + sEventType, fnHandler);
  21.             }else{
  22.                 oTarget["on" + sEventType] = fnHandler;
  23.             }
  24.         }
  25.         function removeEventHandler(oTarget, sEventType, fnHandler) {//移除事件
  26.             if (oTarget.removeEventListener) {
  27.                 oTarget.removeEventListener(sEventType, fnHandler, false);
  28.             } else if (oTarget.detachEvent) {
  29.                 oTarget.detachEvent("on" + sEventType, fnHandler);
  30.             } else {
  31.                 oTarget["on" + sEventType] = null;
  32.             }
  33.         }
  34.          
  35.         var BindAsEventListener = function(object, fun) { //以另一个对象替换当前对象
  36.             return function(event) {
  37.                 return fun.call(object, (event || window.event));
  38.             }
  39.         }
  40.      
  41.         var $ = function(id){
  42.             return document.getElementById(id);
  43.         }
  44.         var Class = {
  45.             create: function() {
  46.                 return function() { this.initialize.apply(this, arguments); }
  47.             }
  48.         }
  49.         var drag = Class.create();
  50.         drag.prototype = {
  51.             initialize: function(id){//初始化
  52.                 this._drag = $(id);
  53.                 this._flag = false;
  54.                 addEventHandler(this._drag, 'mousedown', BindAsEventListener(this, this.start));
  55.                 this._fM = BindAsEventListener(this, this.move);
  56.                 this._fS = BindAsEventListener(this, this.stop);
  57.                 this._drag.style.position = "absolute";
  58.             },
  59.             start: function(oEvent){//相当于onmousedown事件
  60.                 //return this._name;
  61.                 this._x = oEvent.clientX - this._drag.offsetLeft;
  62.                 this._y = oEvent.clientY - this._drag.offsetTop;
  63.                 addEventHandler(document, 'mousemove', this._fM);
  64.                 addEventHandler(document, 'mouseup', this._fS);
  65.                 if(isIE){
  66.                     addEventHandler(this._drag, "losecapture", this._fS);//焦点丢失
  67.                     this._Handle.setCapture();//设置鼠标捕获
  68.                 }else{
  69.                     addEventHandler(window, "blur", this._fS);//焦点丢失
  70.                     oEvent.preventDefault();//阻止默认动作
  71.                 }
  72.             },
  73.             move: function(oEvent){ //相当于onmonusemove事件
  74.                 this._drag.style.left = oEvent.clientX - this._x + "px";
  75.                 this._drag.style.top = oEvent.clientY - this._y + "px";
  76.             },
  77.             stop: function(){ //相当于onmouseup事件
  78.                 removeEventHandler(document, 'mousemove', this._fM);
  79.                 removeEventHandler(document, 'mouseup', this._fS);
  80.                 if(isIE){
  81.                     removeEventHandler(this._drag, "losecapture", this._fS);
  82.                     this._Handle.releaseCapture();
  83.                 }else{
  84.                     removeEventHandler(window, "blur", this._fS);
  85.                 }
  86.             }
  87.         }
  88.         var ndrag = new drag("myDiv");
  89.          
  90.     </script>
  91. </html>
  92. //javascript/6781

回复 "JavaScript实现的网页对象拖放功能代码"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666