61 Native JS: dragging

```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div{
            position: absolute;
            left:0;
            top:0;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="div"></div>
<script>
    var oDiv=document.getElementById('div');
    oDiv.onmousedown=down;
    function processThis(fn,obj){
        return function(e){
            fn.call(obj,e)
        }
    }
    function down(e){
        e=e||window.event;
        this.x=this.offsetLeft;
        this.y=this.offsetTop;
        this.mx= e.clientX;
        this.my= e.clientY;
        if(this.setCapture){
            this.setCapture();
            this.onmousemove=processThis(move,this);
            this.onmouseup=processThis(up,this);
        }else{
            document.onmousemove=processThis(move,this);
            document.onmouseup=processThis(up,this);
        }

    }
    function move(e){
        e=e||window.event;
        = + in this.x this.style.left (e.clientX-this.mx) + 'PX'; 
        //this.x: moving the front offsetLeft value; (e.clientX-this.mx): mouse from lateral movement, i.e., the distance traveled by the lateral box 
        this.style.top = this.y from + (e.clientY-this.my) + 'PX'; 
        //this.y: moving the front offsetTop value; (e.clientX-this.mx): mouse longitudinal movement distance, i.e. the distance moved by the longitudinal box 
    } 
    function up () { 
        IF (this.releaseCapture) { 
            this.releaseCapture (); 
            this.onmousemove = null; 
            this.onmouseup = null; 
        } the else { 
            document.onmousemove = null; 
            document.onmouseup = null; 
        } 

    } 
</ Script> 
</ body> 
</ HTML> 
`` ` 

attached to a, and the difference between jquery zepto of:
1, for a mobile terminal program, Zepto there are some basic touch events can be used for touch screen interaction (tap event, swipe event), Zepto is not supported by IE browser. 
2, the difference Dom operations: When you add id jQuery will not take effect while the Zepto will take effect. 
3, the difference between the triggering event: the load event handler will not be executed when using jQuery; when using Zepto load event handler will be executed. 
4, the difference between the event delegate: 
5, the difference between width () and height () a: determined by Zepto box model (box-sizing), returns the assignment with .width () width, returns plus .css ( 'width') results border the like; ignore the jQuery box model always returns the width / height content area (not including padding, border). 
Distinction 6, offset () is: Zepto Back {top, left, width, height }; jQuery returns {width, height}. 
7, Zepto can not get hidden element width and height, jQuery can. 
8, Zepto not extend to define the prototype method has jQuery. 
9, each method Zepto only through the array, can not traverse a JSON object. 
10, Zepto prop to make use of a method in the operation of dom selected and checked property, in a case where the read attribute value precedence attr. Get Zepto not select element selected option ( 'option [selected]') in a similar manner jQuery $ because the standard properties of the selected property is not css. Should be used $ ( 'option'). Not (function () {return! This.selected}).
61 Native JS: dragging

Guess you like
