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 表单的友好用户体现
Jan 07 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
微信小程序实现商城倒计时
Nov 01 Javascript
微信小程序如何实现在线客服功能
Oct 16 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
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获取金书网的书名的实现代码
2010/06/11 PHP
PHP编程风格规范分享
2014/01/15 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
python将文本转换成图片输出的方法
2015/04/28 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
基于python实现删除指定文件类型
2020/07/21 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
营业员实习自我鉴定
2013/12/07 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
搞笑车尾标语
2014/06/23 职场文书
2014年计生标语
2014/06/23 职场文书
单位租房协议书样本
2014/10/30 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
Html分层的box-shadow效果的示例代码
2021/03/30 HTML / CSS
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers