鼠标拖拽效果-慕课网技术问答-课程问答

weixin_慕移动0592609 2022-01-11

资料下载不了: 0回答·397浏览

qq_高傲鉎萿_0 2018-12-29

拖拽的相对点是什么啊减来减去把自己绕晕了: 抓住一点：一系列的加减操作都是为了获取浮动框左上角应该停留在哪个位置; 1回答·1199浏览

慕粉4323859 2018-12-23

插件。。。。: layer; 1回答·1370浏览

qq_孟家小狐狸_0 2018-11-22

window.onresize设置了不起作用？我的代码那里出问题了呢？请教了！！！: 找到原因了document.documentElement.clientWidth不能设置成全局变量; 1回答·7655浏览

张小颠001 2018-10-24

自己试着用jquery做出来的，自己测试能用，不=不知道还有什么不对的地方还请大神们看看: 1回答·1399浏览

慕函数4904647 2018-07-30

存在bug啊: 你这十有八九是是忘记监听mouseup事件并clearInterval定时器了; 1回答·1331浏览

花开微凉zlt 2018-04-20

求指点为什么mouseoffsetX，mouseoffsetY是0

当然是0 你自己设置的。

按下事件还没执行呢

2回答·1974浏览

慕粉1033167303 2018-04-18

鼠标事件我这里第一步就出错了: 可能这个事件监听函数没有绑定成功，看看an(id)函数的参数是否是正确的id; 1回答·1428浏览

Enjoying_1 2017-10-11

教程不严谨: 没有看到全部代码因此不太清楚问题所在，我按照老师写的并没有问题。; 1回答·1476浏览

qq_Y_133 2017-09-13

小问题一个: 有的，你仔细看，dialog里面有个class="dialogTile"; 1回答·1464浏览

qq_Y_133 2017-09-12

请问一下大神，offsetWidth怎么是空值啊: 你写的代码贴出来啊，是不是获取了错误的对象，还是没有写宽度？; 1回答·2423浏览

诸侯戏烽火 2017-09-06

有个小问题: onmousemove这个事件绑定到document上 “document.onmousemove“; 2回答·1498浏览

qq_坏蓝眼睛_0 2017-08-20

我为什么实现不了移动: 1回答·668浏览

慕尼黑6231967 2017-06-09

z-index: 已采纳田心枫的回答; 这是一个css样式，z-index是改变元素的层级，数值越大，层级越高。有一个很直观的方法，就是打开Chrome/Firefox中审查元素（F12），在这个开发者工具有一个叫3D视图的东西，点击它就能看到一个网页的立体视图，层级一目了然。; 1回答·1302浏览

慕的地5225258 2017-05-04

有答案吗？？

已采纳田心枫的回答

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>慕课网-拖拽实现</title>
<style type="text/css">

    #draggable{ width: 100px;height: 100px; position: absolute;top: 100px;left: 100px;border: 1px solid #ccc;background: #eee;padding: 10px;cursor: move;}

</style>
</head>
<body>

<div id="draggable">拖我</div>

<script type="text/javascript">
    var oDrag = document.getElementById('draggable');
    var isDraging = false;
    var startX = 0;
    var startY = 0;
    oDrag.addEventListener('mousedown',function(e){
        //鼠标事件1 - 在标题栏按下（要计算鼠标相对拖拽元素的左上角的坐标 ，并且标记元素为可拖动）
        isDraging = true;
        startX = e.pageX - this.offsetLeft;
        startY = e.pageY - this.offsetTop;
    })
    document.onmouseup = function(e){
        //鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动）
        isDraging = false;
    }
    document.onmousemove = function(e) {
        //鼠标事件2 - 鼠标移动时（要检测，元素是否标记为移动）
        var moveX = e.pageX - startX;
        var moveY = e.pageY - startY;
        var pageX = document.documentElement.clientWidth - oDrag.offsetWidth;
        var pageY = document.documentElement.clientHeight - oDrag.offsetHeight;
        moveX = Math.min(pageX, Math.max(0, moveX));
        moveY = Math.min(pageY, Math.max(0, moveY));
        if (isDraging) {
            oDrag.style.left = moveX + 'px';
            oDrag.style.top = moveY + 'px';
        }
    };
</script>
</body>
</html>

1回答·877浏览