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 鼠标滚轮事件
Apr 09 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
关于JS字符串函数String.replace()
Apr 07 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
mui框架 页面无法滚动的解决方法(推荐)
Jan 25 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
杏林同学录(四)
2006/10/09 PHP
WHOIS类的修改版
2006/10/09 PHP
一些php技巧与注意事项分析
2011/02/03 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
javascript中创建对象的三种常用方法
2010/12/30 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
jupyter安装小结
2016/03/13 Python
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
浅析python继承与多重继承
2018/09/13 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
校园报刊亭创业计划书
2014/01/02 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
陕西导游词
2015/02/04 职场文书
小英雄雨来观后感
2015/06/09 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书