javascript - 写了一个拖拽,可是怎么拖也拖不动,请帮忙看一下代码哪里有问题,求指点。
黄舟
黄舟 2017-04-11 11:13:49
[JavaScript讨论组]

我想将鼠标放在“请拖拽”上边从而实现拖拽功能。
下面是代码:

请拖拽

内容

js:

var oDrag= document.getElementById('box');
var oMain= document.getElementById('main');
oDrag.onmousedown=function(ev){

    var oEvent=ev||event;
    var disX=oEvent.clientX-oDrag.offsetLeft;
    var disY=oEvent.clientY-oDrag.offsetTop;

    oMain.onmousemove=function(ev){
        var oEvent=ev||event;
        var l=oEvent.clientX-disX;
        var t=oEvent.clientY-disY;

        if(l<0){
            l=0;
        }else if(l>document.documentElement.clientWidth-oDrag.offsetWidth){
            l=document.documentElement.clientWidth-oDrag.offsetWidth;
        }
        if(t<0){
            t=0;
        }else if(t>document.documentElement.clientHeight-oDrag.offsetHeight){
            t=document.documentElement.clientHeight-oDrag.offsetHeight;
        }
        oDrag.style.left=l+'px';
        oDrag.style.top=t+'px';
    };

    oMain.onmouseup=function(){
        oMain.onmousemove=null;
        oMain.onmouseup=null;
        return false;
    };

};

实在找不到为什么,也不报错,请大神指点。

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(5)
大家讲道理

感觉应该是没有加定位吧。要实现拖动的话,元素必须设置绝对定位或者固定定位的哦。

怪我咯

既然拖不动,那就看一下left和top有没有赋值成功,赋值成功了再看一下position设置好了吗

ringa_lee

拖不动说明你没设置浮动也就是position:样式

天蓬老师

大晚上的就不仔细看了
你看看 https://github.com/yangfandas...

大家讲道理

1、给#box 加上绝对定位
2、js第三行应该是 oDrag.onmouseover。因为mousedown事件只是一瞬间的事情
做完这两步的话就可以慢慢移动了

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号