<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>Document</title> <style> #div1 { position:absolute; left: 0; top: 0; width: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>
时间: 2024-11-05 20:32:30