angular Creating a Directive that Adds Event Listeners
2015-09-23 10:10
756 查看
<span my-draggable>Drag ME</span> angular.module('dragModule', []) .directive('myDraggable', ['$document', function($document) { return { link: function(scope, element, attr) { var startX = 0, startY = 0, x = 0, y = 0; element.css({ position: 'relative', border: '1px solid red', backgroundColor: 'lightgrey', cursor: 'pointer' }); element.on('mousedown', function(event) { // Prevent default dragging of selected content event.preventDefault(); startX = event.pageX - x; startY = event.pageY - y; $document.on('mousemove', mousemove); $document.on('mouseup', mouseup); }); function mousemove(event) { y = event.pageY - startY; x = event.pageX - startX; element.css({ top: y + 'px', left: x + 'px' }); } function mouseup() { $document.off('mousemove', mousemove); $document.off('mouseup', mouseup); } } }; }]);
相关文章推荐
- ExtJS vs AngularJS
- AngularJs学习html转义
- AngularJS 项目开发实战
- angular @ = &
- AngularJS体验式编程系列文章
- Angularjs MVC 以及 $scope 作用域 Angularjs 模块 的 run 方法 以及依赖注入中代码压缩问题
- 什么是 Angularjs
- (十九)由一个bug想到的:使用jQuery和angularJS需要注意的事
- 【原创教程】一、Angular教程系列之认识angular
- angular 自定义指令 link
- angular filter
- angular 倒计时
- AngularJs的认识
- Angularjs开发的一些方法和建议整理
- angular $watch
- 学习笔记-AngularJs(五)
- angular 自定义指令
- angularjs实现下拉加载更多
- angularjs directive
- angular之filter的几种调用方式