zoukankan      html  css  js  c++  java
  • div 拖拽

    html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>divDrag</title>
        <style>
          #div1{
             300px;
            height: 300px;
            background-color: #ccc;
            /*一定要绝对定位*/
            position: absolute;
          }
        </style>
      </head>
      <body>
        <div id="div1" class="box"></div>
        <script src="drag.js"></script>
      </body>
    </html>

    //js面向过程式写法

    window.onload = function(){
      var div1 = document.getElementById("div1");
      div1.onmousedown = function(ev){
        var oevent = ev || event;
    
        var distanceX = oevent.clientX - div1.offsetLeft;
        var distanceY = oevent.clientY - div1.offsetTop;
    
        document.onmousemove = function(ev){
          var oevent = ev || event;
          div1.style.left = oevent.clientX - distanceX + 'px';
          div1.style.top = oevent.clientY - distanceY + 'px'; 
        };
        document.onmouseup = function(){
          document.onmousemove = null;
          document.onmouseup = null;
        };
      ;
    };

    jquery
    $('.box').mousedown(function(ev) {
    var oevent = ev || event;
      var distanceX = oevent.clientX - oevent.currentTarget.offsetLeft;
      var distanceY = oevent.clientY - oevent.currentTarget.offsetTop;

    $(document).mousemove(function(ev) {
    var oevent = ev || event;
    $('.box').css('left', oevent.clientX - distanceX + 'px');
    $('.box').css('top', oevent.clientY - distanceY + 'px');
    });
    $(document).mouseup(function(ev) {
    $(document).unbind('mousemove');
    $(document).unbind('mouseup');
    });

    })
  • 相关阅读:
    jmeter并发定时器
    jmeter配置元件作用域
    tsung使用教程简介
    tsung部署详细教程
    Oracle数据库常用函数使用示例
    常用测试学习网站汇总
    PL&SQL编程基础简介及实践
    测试管理流程制度
    pip 提速方法
    eclipse 环境配置记录
  • 原文地址:https://www.cnblogs.com/zhouyx/p/10791288.html
Copyright © 2011-2022 走看看