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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
详解JS预解析原理
Jun 16 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生成各种随机验证码的方法总结【附demo源码】
2017/06/05 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
js运动应用实例解析
2015/12/28 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
React 路由懒加载的几种实现方案
2018/10/23 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
JavaScript 监听组合按键思路及代码实现
2020/07/28 Javascript
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Python实现某论坛自动签到功能
2019/08/20 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python中有关时间日期格式转换问题
2019/12/25 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
荷兰超市:DEEN
2018/03/14 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
公司保密承诺书
2014/03/27 职场文书
社会实践活动总结范文
2014/07/03 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技