jquery拖拽

原生js:

window.onload=function(){
                var oBox=document.getElementById("box");
                oBox.onmousedown=function(ev){
                    var e=ev||event;
                    var disX=e.clientX-oBox.offsetLeft;
                    var disY=e.clientY-oBox.offsetTop;
                    document.onmousemove=function(ev){
                    var e=ev||event;
                    var l=e.clientX-disX;
                    var t=e.clientY-disY;
                    oBox.style.left=l+'px';
                    oBox.style.top=t+'px';
                    }
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        document.onmouseup=null;
                    oBox.releaseCapture&&oBox.releaseCapture();
                    }
                    oBox.setCapture&&oBox.setCapture();
                    return false;
                }
            }

jquery版:

　　　　　　　　　　$(function(){
                        $('#box').mousedown(function(ev){
                            var disX=ev.clientX-$('#box').position().left; //position()是指到定位父级的相对距离,offset()到body的绝对距离
                            var disY=ev.clientY-$('#box').position().top;
                            function move(ev){
                                var l=ev.clientX-disX;
                                var t=ev.clientY-disY;
                                $('#box')[0].style.left=l+'px';  //$('#box')[0]或者$('#box').get(0)将jquery转为js
                                $('#box')[0].style.top=t+'px';
                            }
                            function stop1(){
                                $(document).off('mousemove',move);
                                $(document).off('mouseup',stop1);
                                $('#box')[0].releaseCapture&&$('#box')[0].releaseCapture();
                            }
                            $(document).on('mousemove',move);
                            $(document).on('mouseup',stop1);
                            $('#box')[0].setCapture&&$('#box')[0].setCapture();
                            return false;
                        });
                    });