弹出对话框拖拽JavaScript实现

亦凉 2022-05-27 03:21 240阅读 0赞

**html代码**

<div id="box"></div>

**css代码**

* {
                margin: 0;
                padding: 0;
            }
    
            #box {
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
            }

**JS代码**

var Box = document.getElementById("box");
        var iw = document.documentElement.clientWidth - Box.offsetWidth;
        Box.onmousedown = function (e) {
            var e = e || event;
            var disX = e.offsetX;
            var disY = e.offsetY;
            document.onmousemove = function (e) {
                var e = e || event;
                var l = e.clientX - disX;
                var t = e.clientY - disY;
                l = l >= iw ? l = iw : (l <= 0 ? l = 0 : l = l);
                t = t >= e.clientY ? t = e.clientY : (t <= 0 ? t = 0 : t = t);
                Box.style.left = l + "px";
                Box.style.top = t + "px";
            };
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }

发表评论取消回复

表情：

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

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

相关阅读

相关 matlab 对话框弹出

msgbox('你要显示的内容', '对话框标题'); msgbox(num2str(p), '对话框标题'); matlab中inputdlg函数用户交互中使用方法如下：

清疚/ 2023年08月17日 16:54/ 0 赞/ 150 阅读

相关 element 弹窗位置拖拽；拖拽宽高

vue <template> <el-dialog v-dialogDrag ref="dialog_

逃离我推掉我的手/ 2023年02月21日 04:52/ 0 赞/ 4 阅读

相关 Vue 项目中使用拖拽弹框 dragdialog, 弹框拖拽缩放，拖拽排序等

![20200918000407873.gif][] 在开发的时候有个需求是对弹框进行拖拽移动，拖拽方法，对弹框内的模块进行拖拽排序移动位置本drag-dialog是在

客官°小女子只卖身不卖艺/ 2022年12月08日 05:07/ 0 赞/ 273 阅读

相关【jQuery】jQuery弹出框可拖拽移动

1.说明此demo需要用到jQuery和bootstrap，使用前需要先引入相关文件因为内容比较简单，所以就不多说明了 2.相关代码位置排版使用了绝对定

忘是亡心i/ 2022年10月07日 06:48/ 0 赞/ 238 阅读

相关实现jquery simplemodal弹出框可拖拽效果

simpleModal 更改模式化背景颜色 ![Center][] 修改弹出框边框粗细 ![Center 1][] 实现可拖拽效果

以你之姓@/ 2022年08月06日 12:09/ 0 赞/ 207 阅读

相关弹出对话框拖拽JavaScript实现

html代码 <div id="box"></div> css代码 { margin: 0;

亦凉/ 2022年05月27日 03:21/ 0 赞/ 241 阅读

相关 JavaScript 拖拽效果实现

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。这里需要先熟悉下几个JS事件： onmouse

淩亂°似流年/ 2022年05月17日 07:39/ 0 赞/ 308 阅读

相关 javascript 完美拖拽

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Love The Way You Lie/ 2021年11月11日 04:32/ 0 赞/ 377 阅读

相关 Mui-弹出对话框

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

￡神魔★判官ぃ/ 2021年11月02日 03:31/ 0 赞/ 520 阅读

相关 SweetAlert 弹出对话框

> 中文网址：[http://mishengqiang.com/sweetalert/][http_mishengqiang.com_sweetalert] ![6587

亦凉/ 2021年08月04日 17:40/ 0 赞/ 645 阅读