基于angular实现物体拖拽

最新推荐文章于 2024-06-16 09:43:03 发布

比孤狼还孤独的人

最新推荐文章于 2024-06-16 09:43:03 发布

阅读量534

点赞数

文章标签： html angular js

本文链接：https://blog.csdn.net/weixin_41144077/article/details/101478735

版权

基于angular实现物体的拖拽

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>基于angular实现物体的拖拽</title>
        <script src="angular.js"></script>
        <style>
            #box{
                width: 100px;
                height: 100px;
                background-color: rgb(77, 250, 77);
            }
        </style>
    </head>
    <body ng-app="myApp">
        <div ng-controller="ctl">
            <div id="box" my-drag></div>
        </div>
    </body>
</html>
<script>
    var myApp = angular.module("myApp",[]);
    myApp.directive("myDrag",function(){
        return function($scope,$ele,attr){
            $ele.css({
                "position":"relative",
                "left":"0px",
                "top":"0px",
            });
            $ele.on("mousedown",function(e){
                // 鼠标按下时距离页面边缘的距离
                var pageOriginX = e.pageX;
                var pageOriginY = e.pageY;
                // 鼠标按下时元素的相对位置
                var leftOrigin = parseInt($ele.css("left"));
                var topOrigin = parseInt($ele.css("top"));
                document.onmousemove = function(e){
                    $ele.css({
                        "left":e.pageX - pageOriginX + leftOrigin +"px",
                        "top":e.pageY - pageOriginY + topOrigin + "px",
                    });
                }
            });
            $ele.on("mouseup",function(){
                document.onmousemove = null;
            });
        }
    }).controller("ctl",function(){});
</script>

比孤狼还孤独的人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于angular实现物体拖拽

基于angular实现物体的拖拽<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫