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

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>darg</title>
    <style type="text/css">
    .login_title {
    cursor: move;
    position: absolute;
    top: 300px;
    left: 200px;
    background: #259;
    height: 60px;
    500px;
    }
    </style>
    </head>
    <body>
    <div class="login_title" id="box"></div>

    <script type="text/javascript">
    function getByClass(clsName, parent) {
    var oParent = parent ? document.getElementById(parent) : document, eles = [], elements = oParent.getElementsByTagName('*');
    for (var i = 0, l = elements.length; i < l;
    i++) {
    if (elements[i].className == clsName) {
    eles.push(elements[i])
    }
    }
    return eles;
    }
    window.onload = drag;
    function drag() {

    var oTitle = getByClass('login_title')[0];
    oTitle.onmousedown = fnDown; }
    function fnDown(event) {
    event = event || window.event;
    var oDrag = document.getElementById('box'), disX = event.clientX - oDrag.offsetLeft, disY = event.clientY - oDrag.offsetTop;
    document.onmousemove = function (event) {
    event = event || window.event;
    fnMove(event, disX, disY); }
    document.onmouseup = function () {
    document.onmousemove = null;
    document.onmouseup = null; } }
    function fnMove(e, posx, posy) {
        var oDrag = document.getElementById('box'), l = e.clientX - posx, t = e.clientY - posy, winW = document.documentElement.clientWidth || document.body.clientWidth, winH = document.documentElement.clientHeight || document.body.clientHeight, maxW = winW - oDrag.offsetWidth - 10, maxH = winH - oDrag.offsetHeight; if (l < 0) { l = 0; }
    else if (l > maxW) { l = maxW; }
    if (t < 0) { t = 10; }
    else if (t > maxH) { t = maxH; }
    oDrag.style.left = l + 'px';
    oDrag.style.top = t + 'px';
    }
    </script></body></html>
  • 相关阅读:
    爬虫之爬取淘宝主题市场主要产品信息
    Linux内核11-定时器和时间管理
    UNIX8-进程控制
    UNIX7-进程环境
    Unix3-文件I/O接口
    Linux进程-打开的文件
    递归与二叉树_leetcode230
    递归与二叉树_leetcode235
    递归与二叉树_leetcode226
    递归与二叉树_leetcode222
  • 原文地址:https://www.cnblogs.com/-youth/p/6605626.html
Copyright © 2011-2022 走看看