javascript - 原生js实现拖拽出问题,求大神
怪我咯
怪我咯 2017-04-11 11:52:20
[JavaScript讨论组]

onmousedown,onmousemove,onmouseup仿照网上例子写的 drap 方法 方法测过没有问题的,但是放在页面上确不行了。

效果地址:原生js拖拽出问题求解 就是拖中间那个头像,帮忙看下谢谢

  • 试过了将其他元素都去除 ## position:relative 还是不行

将CSS的旋转运动样式去了 也不行

用p和IMG都不行

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(1)
阿神
  1. 对于posX和posY应该声明在drop函数中,应该声明在mousedown函数内

  2. 当拖动时,应该去掉那个margin-left:-80px的属性

  3. 当为left和right赋值时,不该再去用e.clientX - L

  4. 应该把mouseup绑定事件和mousemove同级,否则会导致点击如果不动,而导致没有解绑mousemove


drap: function(obj) {
        obj.onmousedown = function(event) {
            var event = event || window.event;
            var posX = event.clientX - obj.offsetLeft;//在这儿声明pos
            var posY = event.clientY - obj.offsetTop;
            document.onmousemove = function(event) {
                var event = event || window.event;
                var L = event.clientX - posX;
                var T = event.clientY - posY;
                                obj.style.marginLeft = 0;
                                //console.log(L, T)
                if (L <= 0)
                    L = 0;
                else if (L > document.documentElement.clientWidth - obj.offsetWidth)
                    L = document.documentElement.clientWidth - obj.offsetWidth;
                if (T <= 0)
                    T = 0;
                else if (T > document.documentElement.clientHeight - obj.offsetHeight)
                    T = document.documentElement.clientHeight - obj.offsetHeight;

                obj.style.left = L + "px";//这儿
                obj.style.top = T + "px";
            }
                        document.onmouseup = function() {//这儿解绑
                                document.onmousemove = null;
                                document.onmouseup = null;
                        }
            return false;
        }
    }
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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