jquery实现鼠标拖动

<html>
<head>

<script type='text/javascript' src='js/jquery-1.5.1.js'></script>

<script type='text/javascript'>

    $(document).ready(function(){

     var mouseX=0,mouseY=0;

  var divLeft,divTop;

    $('.dragMe').mousedown(function(e){

     mouseX=e.pageX;

  mouseY=e.pageY;

  var offset=$(this).offset();

  divLeft=parseInt(offset.left,10);

  divTop=parseInt(offset.top,10);

  $(this).bind('mousemove',dragElement);

  });

    function dragElement(event){

     var left=divLeft+(event.pageX-mouseX);

  var top=divTop+(event.pageY-mouseY);

  $(this).css({

  'top': top+'px',

  'left': left+'px',

  'position':'absolute',

     'background-color':'blue'

  });

  }

   $(document).mouseup(function(){

     $('.dragMe').unbind('mousemove').css('background-color','#ccc');

  });

});

</script>

<style type='text/css'>

    div{

    background-color:#ccc;

    height:200px;

    width:300px;

    font-color:green;

    margin:10px;

    float:left;

    text-align:center;

    }

</style>

</head>

<body>

    <div class='dragMe'>Drag ME</div>

<div class="dragMe">Drag Me</div>

</body>

</html>

巴特西

jquery实现鼠标拖动

最新文章

热门文章