zoukankan      html  css  js  c++  java
  • 拖拽div 获取元素

    //==== html ===============================

    <div id="dv"></div>

    //==== css ===============================

    #dv {
    100px;
    height:100px;
    background-color:blue;
    border-radius:50%;
    position:absolute;
    }

    //==== js ===============================

    var dv = document.getElementById('zdy_time_id');
    var x = 0;
    var y = 0;
    var l = 0;
    var t = 0;
    var isDown = false;
    //鼠标按下事件
    dv.onmousedown = function(e) {
    //获取x坐标和y坐标
    x = e.clientX;
    y = e.clientY;

    //获取左部和顶部的偏移量
    l = dv.offsetLeft;
    t = dv.offsetTop;
    //开关打开
    isDown = true;
    //设置样式
    dv.style.cursor = 'move';
    }
    //鼠标移动
    window.onmousemove = function(e) {
    if (isDown == false) {
    return;
    }
    //获取x和y
    var nx = e.clientX;
    var ny = e.clientY;
    //计算移动后的左偏移量和顶部的偏移量
    var nl = nx - (x - l);
    var nt = ny - (y - t);

    dv.style.left = nl + 'px';
    dv.style.top = nt + 'px';
    }
    //鼠标抬起事件
    dv.onmouseup = function() {
    //开关关闭
    isDown = false;
    dv.style.cursor = 'default';
    }

    https://www.jq22.com/webqd1348

  • 相关阅读:
    使用canvas技术在网页上绘制鲜花
    java连接Access数据库
    L2-009. 抢红包
    L2-008. 最长对称子串
    L1-032. Left-pad
    L1-016. 查验身份证
    L1-005. 考试座位号
    L1-030. 一帮一
    L1-023. 输出GPLT
    L1-028. 判断素数
  • 原文地址:https://www.cnblogs.com/nyfz/p/15386499.html
Copyright © 2011-2022 走看看