AngularJS实现拖拽

最新推荐文章于 2021-06-05 06:32:32 发布

EngineerForSoul

最新推荐文章于 2021-06-05 06:32:32 发布

阅读量518

点赞数

文章标签： AngularJS实现拖拽页面拖拽

本文链接：https://blog.csdn.net/lingyiwin/article/details/103184175

版权

<!doctype html>
<html ng-app="drag">
  <head>
    <script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <span draggable>Drag ME</span>
  </body>
</html>

angular.module('drag', []).
  directive('draggable', function($document) {
    return function(scope, element, attr) {
      var startX = 0, startY = 0, x = 0, y = 0;
      element.css({
       position: 'relative',
       border: '1px solid red',
       backgroundColor: 'lightgrey',
       cursor: 'pointer'
      });
      element.on('mousedown', function(event) {
        // 阻止默认的选中内容的拖拽
        event.preventDefault();
        startX = event.screenX - x;
        startY = event.screenY - y;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
      });
 
      function mousemove(event) {
        y = event.screenY - startY;
        x = event.screenX - startX;
        element.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }
 
      function mouseup() {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
      }
    }
  });

AngularJS中文网：https://www.angularjs.net.cn/tutorial/15.html