• 微信
您当前的位置:首页  > 文章 >  HTML一段可以把文字随意拖动的代码

HTML一段可以把文字随意拖动的代码

作者:admin 时间:2022-08-29 阅读数:273人

HTML一段可以把文字随意拖动的代码

要用到的一个功能,最终实现方法是如下:

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>拖拽文字选中</title>
    <script type="text/javascript" src="/image/move_img.js"></script>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            /*background: red;*/
            position: absolute;
        }
    </style>
<script>
    window.onload = function () {
    var oDiv = document.getElementById("div1");

    var disX = 0;
    var disY = 0;

    oDiv.onmousedown = function (ev) {
        var oEvent = ev || event;

        disX = oEvent.clientX - oDiv.offsetLeft;
        disY = oEvent.clientY - oDiv.offsetTop;

        if (oDiv.setCapture) {
            //IE
            oDiv.onmousemove = mouseMove;
            oDiv.onmouseup = mouseUp;

            oDiv.setCapture();//IE
        } else {
            //chrome,ff
            document.onmousemove = mouseMove;
            document.onmouseup = mouseUp;
        }

        function mouseMove(ev) {
            var oEvent = ev || event;
            var left = oEvent.clientX - disX;
            var top = oEvent.clientY - disY;

            oDiv.style.left = left + "px";
            oDiv.style.top = top + "px";
        }

        function mouseUp() {
            this.onmousemove = null;
            this.onmouseup = null;

            if (oDiv.releaseCapture) {
                oDiv.releaseCapture();//IE
            }
        }

        return false;//chrome,ff,IE9
    };

}
</script>
</head>

<body>
   <div id="div1"><div style="width:960px"><p>我是一个DIV</p><p>电脑屋</p><p>我是可以被拖动的文字,当然我也可以是一个图片或者别的代码!</p></div></div>
</body>
</html>

声明

源码下载不顺利,比如源码在百度网盘的有时会被无故取消等,请联系QQ:46667551
本站大部分下载资源收集于网络,但除特别说明之外,基本全部亲自测试可用!
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。

原文链接:https://www.love0312.com/1565.html,转载请注明出处