這篇文章主要給大家介紹了關(guān)于Angular.js如何通過(guò)自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)的相關(guān)資料澈魄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值讯沈，需要的朋友們下面來(lái)一起看看吧蝶棋。
<!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();
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? };
????????????????//設(shè)置捕獲?
? ??????????????oBox.setCapture && oBox.setCapture();
? ? ? ? ? ? }
? ? ? ? };
? ? ? ? return obj;
? ? });
</script>
</html>
