本文实例讲述了AngularJS实现的简单拖拽功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html ng-app=' myApp ' head meta charset=' UTF-8 ' titlewww.jb51.net AngularJS拖拽/title style * { padd :0；margin:0}。wei { width:100px高度：100 px背景：红色；位置：绝对；光标：指针；/*左侧：0；top :0 */}/style/head body ng-controller=' show ' div class=' Wei ' Wei-yi data=' true '/div class=' Wei ' Wei-yi data=' false '/div script src=' http : jquery。js ' type=' text/JAVAScript ' charset=' utf-8 '/script script src=' http 3360 angular。量滴js ' type=' text/JAVAScript ' charset=' utf-8 '/脚本脚本类型//自定义属性app.directive('魏一，function(){ return { restrict : ' A '，//A属性，E标签，C类名，D注释链接：函数(范围、元素、属性){属性。数据=角度。等于(attr。数据，‘真’)；//控制台。日志(attr。数据)；console.log(元素);element.on('mousedown '，函数{ var那=$(this)；控制台。日志(attr。数据)；if(attr。data){ $ div=$(' div ')；控制台。日志($ div)；$div.css({ '宽度' :'100px '，'高度' :'100px '，'边框' : '2px点绿色“，位置”:“绝对”，“左”:that.offset().左侧，“顶”:那个。偏移量().top })；$ div。appendo($(' body '))；} var x=e.clientX-$(this).偏移量()。向左；var y=e.clientY-$(this).偏移量()。顶部；//控制台。日志(x ' : ' y)；$(文档)。打开('鼠标移动'，函数{ if(attr。数据){ $ div。CSS({ ' left ' : e . clientx-x，' top ' : e . clienty-y })；}否则{那。CSS({ ' left ' : e . clientx-x，' top ' : e . clienty-y })；} });$(文档)。on('mouseup '，函数(e){//控制台。日志($ div)；$(文档)。off()；if(attr。数据){那。CSS({ ' left ' : $ div。偏移量().左侧，“top”:美元div。偏移量().top })；$ div。移除()；} }) }) } } });app.controller('show '，['$scope '，function(scope $){ }])；/脚本/正文/html运行效果如下：

更多关于AngularJS相关内容感兴趣的读者可查看本站专题： 《AngularJS指令操作技巧总结》 、 《AngularJS入门与进阶教程》 及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。