拖拽基础（jquery）

css

*{margin: 0; padding: 0;list-style: none;}   
    span{width: 200px;height: 100px;border: 1px solid #000;position: absolute; left: 0;top: 0; background-color:pink;}

html

   <span></span>

js

var checked = false; 


 $('span').mousedown(function(event) {
            checked = true;
        })
        $(window).mouseup(function(event) { //限制范围在窗口内
            checked = false;
        });
                 $(document).mousemove(function(event) {
                         if(checked==true){  //移动的时候判断这和是否为true
                        var spanL = event.pageX-50;
                        var spanT = event.pageY-50;

                             if(spanL<0){spanL=0}
                             if(spanT<0){spanT=0}
                             if(spanL>$(window).width()-202){spanL=$(window).width()-202}
                             if(spanT>$(window).height()-102){spanT=$(window).height()-102}
                

                            $('span').css({'left':spanL,'top':spanT})   
                     }
            
        });