zoukankan      html  css  js  c++  java
  • 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;
        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>

  • 相关阅读:
    Cygwin下载Make
    OFDM技术的基本原理
    HNode B全面提升运营商竞争力
    定制JeOS
    什么是以太网
    Outlook Favorite Folder missing
    OFDM信号发送接收原理解析
    tgtsvr error: Cannot contact Wind Registry on host
    Windows Live Messenger去除广告 zz
    OO Unit4总结 & 结课总结
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3150332.html
Copyright © 2011-2022 走看看