AngularJS实现的简单拖拽功能示例


Posted in Javascript onJanuary 02, 2018

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

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="UTF-8">
    <title>3water.com AngularJS拖拽</title>
    <style>
    *{
      padding:0;
      margin:0;
    }
      .wei{
        width:100px;
        height:100px;
        background: red;
        position:absolute;
        cursor: pointer;
        /*left:0;top:0;*/
      }
    </style>
  </head>
  <body ng-controller="show">
      <div class="wei" wei-yi data="true"></div>
      <div class="wei" wei-yi data="false"></div>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="angular.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      var app = angular.module('myApp',[]);
      //自定义属性
      app.directive("weiYi",function(){
        return{
          restrict :'A',//A属性,E标签,C类名,D注释
          link :function(scope,element,attr){
            attr.data=angular.equals(attr.data,"true");
            //console.log(attr.data);
            console.log(element);
            element.on("mousedown",function(e){
              var that = $(this);
              console.log(attr.data);
              if(attr.data){
                $div=$("<div>");
                console.log($div);
                $div.css({"width":"100px","height":"100px","border": "2px dotted green","position":"absolute","left":that.offset().left,"top":that.offset().top});
                $div.appendTo($("body"));
              }
              var x=e.clientX-$(this).offset().left;
              var y=e.clientY-$(this).offset().top;
              //console.log(x+":"+y);
              $(document).on("mousemove",function(e){
                if(attr.data){
                  $div.css({"left":e.clientX-x,"top":e.clientY-y});
                }else{
                  that.css({"left":e.clientX-x,"top":e.clientY-y});
                }
              });
              $(document).on("mouseup",function(e){
                //console.log($div);
                $(document).off();
                if(attr.data){
                  that.css({"left":$div.offset().left,"top":$div.offset().top});
                  $div.remove();
                }
              })
            })
          }
        }
      });
      app.controller('show',['$scope',function(scope$){
      }]);
    </script>
  </body>
</html>

运行效果如下:

AngularJS实现的简单拖拽功能示例

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

Javascript 相关文章推荐
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
原生js 秒表实现代码
Jul 24 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
AngularJS实现的锚点楼层跳转功能示例
Jan 02 #Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 #Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 #Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 #Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 #Javascript
You might like
利用PHP动态生成VRML网页
2006/10/09 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python中的随机函数小结
2018/01/27 Python
Python学习笔记之For循环用法详解
2019/08/14 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
大学生简历中个人的自我评价
2013/10/06 职场文书
教育孩子心得体会
2014/01/01 职场文书
汽车维修专业个人求职信范文
2014/01/01 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
春节慰问信范文
2015/02/15 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
python分分钟绘制精美地图海报
2022/02/15 Python