拖拽（可以封装成指令的形式 angular ）

最新推荐文章于 2025-06-25 09:24:09 发布

mystraight

最新推荐文章于 2025-06-25 09:24:09 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：原生js angular 文章标签： angular

本文链接：https://blog.youkuaiyun.com/qq_35568483/article/details/77744514

angular 同时被 2 个专栏收录

11 篇文章

订阅专栏

原生js

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的拖拽元素方法，并详细解释了如何限制被拖拽元素的位置，确保其不会超出父元素的边界。通过计算鼠标位置与元素偏移量之间的关系，实现了平滑且有限制的拖拽效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        //父元素的宽高，不让其脱离宽高
        //link:function (scope,ele,attr) {ele.parent (可以拿父元素的宽高)}
        $scope.widths = $(".box").width();
         $scope. heights = $(".box").height();
        function draggleBefore (_this,ev){
               var pos = $scope.getPos(ev);
                $scope.getOffset(_this,pos);
        }
        //拖拽元素  
        //ele.on('mousedown',function(){
        //  draggleBefore(_this,ev)
        //});
        //拖拽元素  具体
        $(".date").mousedown(function(ev){
                 var _this = this;
                 $scope.flag = 0;
                 draggleBefore(_this,ev)
        }    
        $scope.getPos =function(ev){
            var ev = ev || event;
            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
            var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;
            return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
        };
        $scope.getOffset = function(_this,pos){
            var disX=0;
            var disY=0;
             //这样就可以获取鼠标坐标，比如pos.x表示鼠标横坐标
            disX=pos.x-_this.offsetLeft;
            disY=pos.y-_this.offsetTop;
            document.onmousemove=function(ev){
                {
                    var oEvent=ev||event;
                    var pos=$scope.getPos(oEvent);
                  //防止div跑出可视框
                    var left = pos.x-disX;
                    var top =pos.y-disY;
                    if(left < 0){
                        left = 0;
                    }
                    if(left >$scope.widths-_this.offsetWidth){
                        left = $scope.widths-_this.offsetWidth;

                    }
                    if(top <0){
                        top =0;
                    }
                     if(top > $scope.heights-_this.offsetHeight) {
                        top = $scope.heights-_this.offsetHeight;
                    }
                    _this.style.left = left+'px';
                    _this.style.top = top +'px';
                    //或者用jq css();
                }
                document.onmouseup=function() {
                    document.onmousemove = null; //将move清除
                    document.onmouseup = null;
                    $scope.returnData(left,top);
                };
                return false;  //火狐的bug，要阻止默认事件
            }
        };

        $scope.returnData = function(x,y){
            console.log("x"+x+"y"+y)
        };