比较有意思的原生态js拖拽写法----摘自javascript高级程序设计3

  var DragDrop = function () {

                 var dragging = null;

                 var diffX = 0;

                 var diffY = 0;

                 function handleEvent(event) {

                     event = EventUtil.getEvent(event);

                     var target = EventUtil.getTarget(event);

                     switch (event.type) {

                         case "mousedown":

                             if (target.className.indexOf("draggable") > -1) {

                                 dragging = target;

                                 diffX = event.clientX - target.offsetLeft;

                                 diffY = event.clientY - target.offsetTop;

                             }

                             break;

                         case "mousemove":

                             if (dragging !== null) {

                                 dragging.style.left = (event.clientX - diffX) + "px";

                                 dragging.style.top = (event.clientY - diffY) + "px";

                             }

                             break;

                         case "mouseup":

                             dragging = null;

                             break;

                     }

                 }

                 return {

                 enable : function () {

                     EventUtil.addHandler(document, "mousedown", handleEvent);

                     EventUtil.addHandler(document, "mousemove", handleEvent);

                     EventUtil.addHandler(document, "mouseup", handleEvent);

                 },

                 disable : function () {

                     EventUtil.addHandler(document, "mousedown", handleEvent);

                     EventUtil.addHandler(document, "mousemove", handleEvent);

                     EventUtil.addHandler(document, "mouseup", handleEvent);

                 }

                 }

             } ();

           window.onload = function () {

                 DragDrop.enable(); DragDrop.disable();

             }

 <body>

 <div class="draggable" style="position:absolute; background-color:Red; width:100px; height:100px;left:0px"></div>

 <div class="draggable" style="position:absolute; background-color:Red; width:100px; height:100px;left:200px"></div>

 <div class="draggable" style="position:absolute; background-color:Red; width:100px; height:100px;left:500px"></div>

 <div class="draggable" style="position:absolute; background-color:Red; width:100px; height:100px;left:800px"></div>

 </body>

巴特西

比较有意思的原生态js拖拽写法----摘自javascript高级程序设计3

最新文章

热门文章