zoukankan      html  css  js  c++  java
  • 一步一步理解拖拽Drag(四)

    拖拽三部曲:
          1、可以指定标题栏作为移动区域,默认整个移动物体都可以拖动
          2、可以设置移动范围,当前移动物体相对于某个区域内范围内移动,默认整个页面内拖动

    View Code
      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <title>一步一步理解拖拽Drag(四)</title>
    5 <style type="text/css">
    6 *{margin: 0px;padding: 0px;}
    7 .moving{opacity: 0.6;filter: alpha(opacity=60);}
    8 .maindiv{ 960px;border: 1px solid red;position: relative;margin: 0 auto;}
    9 .bigdiv{ 960px;position: relative;height: 1000px;overflow: hidden;}
    10 #mmdiv{ 300px;height: 100px;left: 0px;top: 0px;position: absolute;border: 1px solid red;overflow: hidden;}
    11 #mmdiv h3{ 100%;height: 30px;line-height: 30px;background: #6666FF;cursor: move;}
    12 #mmdiv h3 span{margin-left: 20px;}
    13 </style>
    14 <script type="text/javascript">
    15 var base = {
    16 getId: function (id) {
    17 return document.getElementById(id);
    18 },
    19 addEvent: function (element, type, fn) {
    20 if (element.addEventListener) {
    21 element.addEventListener(type, fn, false);
    22 }
    23 else if (element.attachEvent) {
    24 element.attachEvent("on" + type, fn);
    25 }
    26 else {
    27 element["on" + type] = fn;
    28 }
    29 },
    30 removeEvent: function (element, type, fn) {
    31 if (element.removeEventListener) {
    32 element.removeEventListener(type, fn, false);
    33 }
    34 else if (element.detachEvent) {
    35 element.detachEvent("on" + type, fn);
    36 }
    37 else {
    38 element["on" + type] = null;
    39 }
    40 },
    41 unDefaultEvent: function (event) {
    42 if (event && event.preventDefault) {
    43 event.preventDefault();
    44 }
    45 else {
    46 event.returnValue = false;
    47 }
    48 },
    49 page: function (event) {
    50 return { x: event.pageX || event.clientX + document.documentElement.scrollLeft, y: event.pageY || event.clientY + document.documentElement.scrollTop };
    51 }
    52 };
    53
    54 (function () {
    55
    56 function Drag(obj, handle, bigcont, moveCss, moveX, moveY) {
    57 this.obj = obj;
    58 this.handle = handle || obj;
    59 this.bigcont = bigcont || document.documentElement;
    60 this.moveCss = moveCss;
    61 this.moveX = moveX || false;
    62 this.moveY = moveY || false;
    63 this.disX = this.disY = 0;
    64 var _this = this;
    65 base.addEvent(this.handle, "mousedown", function (event) {
    66 _this.startDrag(event);
    67 });
    68 }
    69
    70 Drag.prototype = {
    71 startDrag: function (event) {
    72 base.unDefaultEvent(event);
    73 var _this = this;
    74 this.disX = base.page(event).x - this.obj.offsetLeft;
    75 this.disY = base.page(event).y - this.obj.offsetTop;
    76 this.mousemoveHandle = function (event) {
    77 _this.move(event);
    78 };
    79
    80 this.mouseupHandle = function () {
    81 _this.stopDrag();
    82 };
    83
    84 base.addEvent(document, "mousemove", this.mousemoveHandle);
    85
    86 base.addEvent(document, "mouseup", this.mouseupHandle);
    87
    88 if (document.selection && document.selection.empty) {
    89 document.selection.empty();
    90 }
    91 else if (window.getSelection) {
    92 window.getSelection().removeAllRanges();
    93 }
    94
    95 if (this.obj.setCapture) {
    96 this.obj.setCapture(true);
    97 }
    98
    99 },
    100 move: function (event) {
    101 base.unDefaultEvent(event);
    102 this.obj.className = this.moveCss;
    103
    104 var x = base.page(event).x - this.disX;
    105 var y = base.page(event).y - this.disY;
    106
    107 var range = {
    108 minX: this.bigcont.scrollLeft,
    109 minY: this.bigcont.scrollTop,
    110 maxX: this.bigcont.scrollWidth - this.obj.offsetWidth,
    111 maxY: this.bigcont.scrollHeight - this.obj.offsetHeight
    112 };
    113
    114 x = Math.max(x, range.minX);
    115 x = Math.min(x, range.maxX);
    116 y = Math.max(y, range.minY);
    117 y = Math.min(y, range.maxY);
    118
    119 if (true == this.moveX && true == this.moveY) {
    120 }
    121 else if (true == this.moveX) {
    122 this.obj.style.left = x + "px";
    123 }
    124 else if (true == this.moveY) {
    125
    126 this.obj.style.top = y + "px";
    127 }
    128 else {
    129 this.obj.style.left = x + "px";
    130 this.obj.style.top = y + "px";
    131 }
    132 },
    133 stopDrag: function () {
    134 this.obj.className = "";
    135 base.removeEvent(document, "mousemove", this.mousemoveHandle);
    136 base.removeEvent(document, "mouseup", this.mouseupHandle);
    137 if (this.obj.releaseCapture) {
    138 this.obj.releaseCapture(true);
    139 }
    140 }
    141 };
    142
    143 base.addEvent(window, "load", function (event) {
    144 var odiv = base.getId("mmdiv");
    145 var obj = odiv.getElementsByTagName("h3")[0];
    146 var bigdiv = base.getId("bigdiv");
    147 var btn = document.getElementsByTagName("input");
    148 new Drag(odiv, obj, bigdiv, "moving");
    149 });
    150 })();
    151 </script>
    152 </head>
    153 <body>
    154 <div class="maindiv">
    155 <div>
    156 默认整个页面内有问题,需要待完善
    157 </div>
    158 <div id="bigdiv" class="bigdiv">
    159 <div id="mmdiv">
    160 <h3>
    161 <span>标题</span>
    162 </h3>
    163 </div>
    164 </div>
    165 </div>
    166 </body>
    167 </html>
  • 相关阅读:
    函数 free 的原型
    malloc 返回值的类型是 void *
    malloc 函数本身并不识别要申请的内存是什么类型
    用 free 或 delete 释放了内存之后,立即将指针设置为 NULL,防止产 生“野指针”
    动态内存的申请与释放必须配对,防止内存泄漏
    避免数组或指针的下标越界,特别要当心发生“多 1”或者“少 1” 操作
    不要忘记为数组和动态内存赋初值
    用 malloc 或 new 申请内存之后,应该立即检查指针值是否为 NULL
    释放了内存却继续使用它
    忘记了释放内存,造成内存泄露
  • 原文地址:https://www.cnblogs.com/kuikui/p/2316839.html
Copyright © 2011-2022 走看看