HTML 可拖动div标签

最新推荐文章于 2024-06-09 23:08:20 发布

111wangpeiji

最新推荐文章于 2024-06-09 23:08:20 发布

阅读量5.7k

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/u012939262/article/details/52183369

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

movingwindow.js:

var clickstatus = false;
var lastX = 0;
var lastY = 0;
var lastcX = 0;
var lastcY = 0;
    function mousedown(e){
        if(e.target.className.indexOf('com1')!=-1){
            clickstatus = true;
            var moveObject = document.getElementById('window');
            lastX = moveObject.offsetLeft;
            lastY = moveObject.offsetTop;
            lastcX = e.clientX;
            lastcY = e.clientY;
        }
    }

    function mousemove(e){
        var moveObject = document.getElementById('window');
        if(clickstatus){
            moveObject.style.left = lastX + (e.clientX - lastcX - 10) + 'px' ;
            moveObject.style.top = lastY + (e.clientY-lastcY - 10) + 'px';
        }
    }

    function mouseup(e){
        clickstatus = false;
        lastX=0;
        lastY=0;
        lastcX=0;
        lastcY=0;
    }

document.addEventListener('mousedown',mousedown);
document.addEventListener('mousemove',mousemove);
document.addEventListener('mouseup',mouseup);



movingwindow.html:

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title</title>
    <style type="text/css">
        .window{
            width: 300px;
            height: 200px;
            position: absolute;
            background-color: aqua;
            -webkit-box-shadow: 1px 1px 3px #292929;
            -moz-box-shadow:1px 1px 3px #292929;
            box-shadow: 1px 1px 3px #292929;
            border-radius: 20px 20px 20px 20px;
            margin: 10px;
        }

        .com1{
            height:30px;
            border-radius: 20px 20px 0px 0px;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 30px;
        }
        .com2{
            padding:4px;
        }
    </style>
    <script type="text/javascript" src="movingwindow.js"></script>
</head>
<body>
<div class="window" id="window">
    <div class="com1">666666</div>
    <div class="com2">content</div>
</div>

</body>
</html>