Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularJS and Sortable demo</title>
​
​
  <!-- AngularJS -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
​
</head>
<body>
  
  <div ng-app="dragModule">
    
    <div class="parent">
      <span my-draggable>Drag Me</span>
    </div>
    
  </div>
​
  
</body>
</html>
 
.parent {
  position: relative;
  
  /* start of some arbitrary positioning */
  right: 4px;
  top: 7px;
  margin: 5px 0 0 20px;
  /* end of some arbitrary positioning */
  
  width: 100px;
  height: 100px;
  border: 1px #000 solid;
}
​
.parent span {
  width: 70px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}
 
angular.module('dragModule', [])
.directive('myDraggable', ['$document', function($document) {
return {
  link: function(scope, element, attr) {
    var startX = 0, startY = 0, x = 0, y = 0;
​
    element.css({
     position: 'absolute',
     border: '1px solid red',
     backgroundColor: 'lightgrey',
     cursor: 'pointer'
    });
​
    element.on('mousedown', function(event) {
      // Prevent default dragging of selected content
      event.preventDefault();
      startX = event.pageX - x;
      startY = event.pageY - y;
      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });
​
    function mousemove(event) {
      y = event.pageY - startY;
      x = event.pageX - startX;
      if(x>27){
         x=27;
       }
      else if(x<0){
        x=0;
      }
      if(y>77){
        y=77;
      }
      else if(y<0){
        y=0;
      }
      element.css({
        top: y + 'px',
        left:  x + 'px'
      });
    }
​
    function mouseup() {
      $document.off('mousemove', mousemove);
      $document.off('mouseup', mouseup);
    }
  }
};
}]);
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Liadcpro
0viewers