可拖动的DIV

淡淡的烟草味﹌ 2022-06-14 02:18 285阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
        <title>test</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"
        type="text/javascript"></script>
        <style type="text/css">
        .drag{
              position:absolute;
              width:100px; height:100px;
              border:1px solid #96C2F1; background-color: #EFF7FF;
              cursor:move; line-height:100px; text-align:center;
        }
        </style>
        <script type="text/javascript">
            (function (document) {
                //Usage: $("#id").drag() 
                //Author: hooyes
                $.fn.Drag = function () {
                    var M = false;
                    var Rx, Ry;
                    var t = $(this);
                t.mousedown(function (event) {
                          Rx = event.pageX - (t.offset().left || 0);
                        Ry = event.pageY - (t.offset().top || 0);
                        t.css("position", "absolute").css('cursor', 'move').fadeTo(20, 0.5);
                        M = true;
                    })
                .mouseup(function (event) {
                    M = false; t.fadeTo(20, 1);
                });
                    $(document).mousemove(function (event) {
                        if (M) {
                            t.css({ top: event.pageY - Ry, left: event.pageX - Rx });
                        }
                    });
                }
            })(document);
     
     
            $(document).ready(function () {
                $("#Div1").Drag();
            });
        </script>
    </head>
    <body>
    <div id="Div1" class="drag">我是DIV1</div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关拖动div元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

蔚落/ 2023年06月01日 12:38/ 0 赞/ 29 阅读

相关 JS——实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围

[https://blog.csdn.net/bettergg/article/details/89206568][https_blog.csdn.net_bettergg_a

素颜马尾好姑娘i/ 2023年01月12日 11:36/ 0 赞/ 149 阅读

相关设置div随意拖动

/ 设置div随意拖动 start / var dragging = false; var iX, iY; $("divID").m

客官°小女子只卖身不卖艺/ 2022年11月14日 10:16/ 0 赞/ 191 阅读

相关可拖动的div弹出层

js： var mainDiv; var bgDiv; function popD(mainId, titleId, w, h) \{ mainDi

傷城~/ 2022年07月10日 07:28/ 0 赞/ 262 阅读

相关可拖动的DIV

<!DOCTYPE html> <html> <head> <title>test</title> <script sr

淡淡的烟草味﹌/ 2022年06月14日 02:18/ 0 赞/ 286 阅读

相关 Dom 可拖动div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

骑猪看日落/ 2022年06月11日 00:00/ 0 赞/ 264 阅读

相关 Jquery 实现div随意拖动

目的：使div可以拖动。注：单纯用jq也是可以做的，这里使用jquery UI插件使得代码更简单。需要用的到的插件下载：[https://jqueryui.com/

超、凢脫俗/ 2022年05月19日 06:28/ 0 赞/ 433 阅读

相关 JS-实现可拖动的div；实时监听input标签value变化

实现可拖动的div var mover = new Mover(document.getElementById("header")); // js封装：实

你的名字/ 2022年05月18日 09:17/ 0 赞/ 234 阅读

相关 html js设置div可拖动效果

第一种：先看代码，可直接复制使用。这部分是我找了个例子，看了一遍，自己写的。但是也有一些问题。问题：js设置div可拖动效果当我在实际项目中使用时，div里有关闭d

灰太狼/ 2022年03月17日 12:52/ 0 赞/ 653 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 491 阅读