拖拽（获得位置可保存）

最新推荐文章于 2021-01-29 06:53:43 发布

dongsdh

最新推荐文章于 2021-01-29 06:53:43 发布

阅读量2.1k

点赞数 1

分类专栏：鼠标事件相关文章标签： html javascript css

本文链接：https://blog.csdn.net/dongsdh/article/details/79700925

版权

鼠标事件相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head runat="server">
	
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Index</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    // 拖拽与发送实现
 
        $(document).ready(function () {
            //拖拽
            var _move = false; //移动标记
            var _x, _y;
            var index_x, index_y;
 
            $("#drag").bind("mousedown", downIndex); //div鼠标按下事件绑定
            $(document).bind("mousemove", mmove); //鼠标移动事件绑定
            $(document).bind("mouseup", mup); //鼠标弹起事件绑定
            function mmove(e) {
                if (_move) {
                    var x = e.pageX - _x; //移动时根据鼠标位置计算控件左上角的绝对位置
                    var y = e.pageY - _y;
                    $("#drag").css({ top: y, left: x }); //div新位置
                    show(x, y);
                }
            }
            function mup() {
                _move = false;
            }
            function downIndex(e) {
                _move = true;
                _x = e.pageX - parseInt($("#drag").css("left"));
                _y = e.pageY - parseInt($("#drag").css("top"));
 
            }
            function show(x, y) {
                document.getElementById("result").innerHTML ="x坐标为："+x+"</br>"+"y坐标为："+y+"</br>"+"(注：这是div左顶点的坐标)";
            }
        });
</script>
<style type="text/css">
        .dragg
        {
            border: 1px solid #aeeeee; 
            width: 400px;
            height: 300px;
            cursor: move;
            position: absolute;
            left:0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="dragg" id="drag">
<div id="result" style="background-color:#afffff; height:200px"></div>
</div> 
 
</body>
</html>

dongsdh

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
拖拽（获得位置可保存）

&lt;html&gt;&lt;head runat="server"&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;Index&lt;/title&gt; &lt;script type="
复制链接

扫一扫

专栏目录