Angular Drag Example

Quick sketch of dragging an item with angular What is a angular drag example How do you make a angular drag example? This script and codes were developed by Jeff Daze on 24 March 2022, Thursday.

How do I make an angular drag example?
  1. Angular Drag Example Previews
  2. Angular Drag Example HTML Codes
  3. Angular Drag Example CSS Codes
  4. Angular Drag Example JS Codes
Angular Drag Example Previews

Angular Drag Example HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Angular Drag Example</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div ng-app="test" ng-controller="testCtrl" id="container">
    
        <div class="shape" ng-draggable='dragOptions'>Drag Me</div>
   
</div>
  <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

Angular Drag Example CSS Codes

html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

#container {
   width : 100%;
   height: 100%;
   background-color: black;
}

.shape {
    position: absolute;
    width : 100px;
    height: 100px;
    background-color: white;
    cursor: move;
}

Angular Drag Example JS Codes

angular.module('test', [])

.directive('ngDraggable', function($document) {
  return {
    restrict: 'A',
    scope: {
      dragOptions: '=ngDraggable'
    },
    link: function(scope, elem, attr) {
      //vars...
      var startX;
      var startY; 
      var x = 0; 
      var y = 0;
      var start; 
      var stop; 
      var drag; 
      var container;

      var width  = elem[0].offsetWidth;
      var height = elem[0].offsetHeight;

      //drag options...
      if (scope.dragOptions) {
        start  = scope.dragOptions.start;
        drag   = scope.dragOptions.drag;
        stop   = scope.dragOptions.stop;
        var id = scope.dragOptions.container;
        if (id) {
            container = document.getElementById(id).getBoundingClientRect();
        }
      }

      //Handle mouse events here...
      
      elem.on('mousedown', function(e) {
        e.preventDefault();
        startX = e.clientX - elem[0].offsetLeft;
        startY = e.clientY - elem[0].offsetTop;
        $document.on('mousemove', mousemove);
        $document.on('mouseup', mouseup);
        if (start) start(e);
      });


      function mousemove(e) {
        y = e.clientY - startY;
        x = e.clientX - startX;
        setPosition();
        if(drag){
          drag(e);
        }
      }

      function mouseup(e) {
        $document.unbind('mousemove', mousemove);
        $document.unbind('mouseup', mouseup);
        if(stop){
          stop(e);
        }
      }

      
      // Move element, constrain to container if specified...
      function setPosition() {
        if (container) {
          if (x < container.left) {
            x = container.left;
          } else if (x > container.right - width) {
            x = container.right - width;
          }
          if (y < container.top) {
            y = container.top;
          } else if (y > container.bottom - height) {
            y = container.bottom - height;
          }
        }

        elem.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }
    }
  }

})

.controller('testCtrl', function($scope) { 
    $scope.dragOptions = {
        start: function(e) {
          console.log("STARTING");
        },
        drag: function(e) {
          console.log("DRAGGING");
        },
        stop: function(e) {
          console.log("STOPPING");
        },
        //container: 'container'
      	container: ''
    }

});
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.
HIDE NOW!