这篇文章主要给大家介绍了关于Angular.js如何通过自定义指令directive实现滑块滑动的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angularjs具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义指令拖拽</title>
<script src="angular.min.js"></script>
<style>
#box{
position:absolute;
top:200px;
left:200px;
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body ng-app="myApp">
<div id="box" move-directive></div>
</body>
<script>
var oBox=document.getElementById("box");
angular.module('myApp',[]).directive("moveDirective",function(){
var obj = {
restrict : 'ECMA',
link : function(scope,element,attr){
oBox.onmousedown = function(ev){
var event =ev || window.event,
disW = event.clientX - oBox.offsetLeft,
disH = event.clientY - oBox.offsetTop;
document.onmousemove = function(ev){
var event =ev || window.event,
posL = event.clientX - disW,
posT = event.clientY - disH;
oBox.style.left = posL+"px";
oBox.style.top = posT+"px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup=null;
//释放捕获
oBox.releaseCapture && oBox.releaseCapture();
};
};
//设置捕获
oBox.setCapture && oBox.setCapture();
}
};
return obj;
});
</script>
</html>
网友评论