<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#div1 { position:absolute; left: 0; top: 0; 150px; height:150px; border:1px red solid; background: red; cursor: pointer;}
</style>
<script src="jquery-1.11.1.js"></script>
<script src="angular.min.js" ></script>
<script type="text/javascript">
var m1 = angular.module('myApp', []);
// 指令是可以复用的
m1.directive('myDrag', function() {
// scope: 独立作用域, 只在当前标签起作用, 跟外面没有关系
// 自定义指令内部数据的绑定方式, 共享的
// @: 绑定的普通字符串 , = ：解析的是数据, &: 绑定的是父级函数的传递方式
// 属性指令跟模板没有太大的关系
return {
restrict : 'A',
link: function( scope, ele, attr ) {
var disX = 0, disY = 0;
attr.myDrag = angular.equals(attr.myDrag, 'true');
// alert( typeof attr.myDrag);
ele.on('mousedown', function(ev) {
var This = this;
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
if(attr.myDrag) {
var $line = $('<div>');
$line.css({ width : $(this).outerWidth() , height : $(this).outerHeight() , position : 'absolute' , left : $(this).offset().left , top : $(this).offset().top , border : '1px gray dotted'});
$('body').append($line);
}
$(document).on('mousemove', function(ev) {
// console.log($(this).get(0).tagName);
//
if(attr.myDrag) {
$line.css('left',ev.pageX - disX);
$line.css('top',ev.pageY - disY);
} else {
$(This).css('left', ev.pageX - disX);
$(This).css('top', ev.pageY - disY);
}
});
$(document).on('mouseup', function() {
$(document).off();
if(attr.myDrag) {
$(This).css('left',$line.offset().left);
$(This).css('top',$line.offset().top);
$line.remove();
}
});
return false;
});
}
};
});
m1.controller('tab', ['$scope', function($scope) {
// $scope.age = 101;
}]);
</script>
</head>
<body ng-controller="tab">
<div id="div1" my-drag="true"></div>
</body>
</html>