zoukankan      html  css  js  c++  java
  • 拖拽功能的实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #app{
    300px;
    background-color: #ccc;
    position: absolute;
    height: 300px;
    }

    </style>
    </head>
    <body>
    <div id="app">

    </div>
    </body>
    </html>
    <script>
    window.onload = function() {
    var app = document.getElementById("app");
    app.onmousedown = function (ev) {
    var oevent = ev || event;

    var distanceX = oevent.clientX - app.offsetLeft;
    var distanceY = oevent.clientY - app.offsetTop;

    document.onmousemove = function (ev) {
    var oevent = ev || event;
    app.style.left = oevent.clientX - distanceX + 'px';
    app.style.top = oevent.clientY - distanceY + 'px';
    };
    document.onmouseup = function () {
    document.onmousemove = null;
    document.onmouseup = null;
    };
    ;
    };
    };
    </script>

  • 相关阅读:
    C语言实验报告
    C语言实验报告
    第四次作业4-树和二叉树
    第03次作业-栈和队列
    第02次作业-线性表
    Data_Structure01-绪论作业
    C语言第二次实验报告
    C语言实验报告
    第04次作业-树
    第03次作业-栈和队列
  • 原文地址:https://www.cnblogs.com/zouyun/p/7661533.html
Copyright © 2011-2022 走看看