dragable при помощи деректив
идея простая если к любому элементу добавить dragable, то его можно перемещать мышью
<!doctype html>
<html ng-app="myApp">
<head>
<style>
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.block{
width:50px;
height:50px;
cursor:move;
}
</style>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
//Обьявим модуль
var myApp=angular.module('myApp', []);
//создадим дерективу
myApp.directive('dragable',function(){
return function(scope,element,attr){
//метод срабатывает при mouseMove
function move(e){
element[0].style.top=e.y+"px";
element[0].style.left=e.x+"px";
};
// срабатывает при отпускании мыши
function mouseUp(){
document.removeEventListener('mousemove',move);
document.removeEventListener('mouseUp',mouseUp);
}
//подпишимся на клик по элементу
element.bind('mousedown',function(){
//выставим позицию в absolute вдруг нестоит :)
element[0].style.position="absolute";
//подпишимся на перемещения мыши
document.addEventListener('mousemove',move);
//подпишимся на отпускание мыши
document.addEventListener('mouseup',mouseUp);
})
}
});
</script>
</head>
<body class="noselect">
<div dragable style="background-color:#999;" class="block">drag me</div>
<div dragable style="background-color:#99F;" class="block">drag me</div>
<div dragable style="background-color:#F99;" class="block">drag me</div>
<div dragable style="background-color:#9F9;" class="block">drag me</div>
<div style="background-color:#000;color:white; cursor:auto;" class="block">no drag</div>
</body>
</html>