微客导航 » 文章资讯 » 使用angular帮你实现拖拽的示例

使用angular帮你实现拖拽的示例

2024-02-17 11:05:02 134

拖拽有多种写法，在这里就看一看angular版的拖拽。







#box{
width:100px;
height:100px;
background:black;
/*一定要给当前元素设置绝对定位*/
position:absolute;
left:0;
top:0;
}

//自定义一个模块 varapp=angular.module("myApp",[]); //自定义指令自定义指令时一定要使用驼峰命名法 app.directive('myDrag',function(){ //返回一个函数 return{ link:function(scope,element,attr){ //scope可以接收到的数据 //element当前的元素 //attr属性 //拖拽的三大事件mousedown,mousemove,mouseup.使用jq绑定事件的方法进行绑定 element.on('mousedown',function(ev){ //通过event获取到当前对象 varThis=$(this); //获取到鼠标离当前元素上边框的距离 vardisX=ev.clientX-$(this).offset().left; //获取到元素距离左边框的距离 //因为在拖拽的过程中不变的是鼠标距离元素边框的距离通过不变和已知求变量 vardisY=ev.clientY-$(this).offset().top; $(document).on('mousemove',function(ev){ //将所改变的值通过样式设置给当前元素 This.css({ left:ev.clientX-disX, top:ev.clientY-disY, }); }); $(document).on('mouseup',function(){ //鼠标松开时关闭所有事件 $(document).off(); }) }) }, restrict:'A',//ECMAE元素C类名M注释A属性 }; });

以上这篇使用angular帮你实现拖拽的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

使用angular帮你实现拖拽的示例

热门推荐

随机推荐