AngularJS Tutorial For Beginners: Dragable class

Create index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AngularJS draggable class</title>

function mousemove(event) {
        y = event.screenY - startY;
        x = event.screenX - startX;
        element.css({
          top: y + 'px',
          left:  x + 'px'
        });
      }

function mouseup() {
        $document.off('mousemove', mousemove);
        $document.off('mouseup', mouseup);
      }
    };
  });
})(window.angular);
</script>
 <style>
 .rock{
 background:#333333;
 margin:auto;
 padding:10px;
 overflow:auto;
 }
  </style>
  
</head>
<body ng-app="drag">
<div class="rock">
  <span draggable><p style="text-align:center;color:#003300">Drag ME 1</p></span>
  <span draggable><p style="text-align:center;color:#0000CC">Drag ME 2</p></span>
  <span draggable><p style="text-align:center;color:#993300">Drag ME 3</p></span>
  <span draggable><p style="text-align:center;color:#6633FF">Drag ME 4</p></span>
  <span draggable><p style="text-align:center;color:#FF6600">Drag ME 5</p></span>
  </div>
</body>
</html>

Monday, 13 April 2015

Dragable class

Create index.html

1 comment: