一. Html5的拖拽行为

　　1.设置元素为可拖放：把draggable属性设置为true.

　　example: <div id="drag1" draggable="true"></div>

(注：img和带href的a默认是auto,表示可拖拽，其他的元素都是不可拖拽。为安全起见，建议对可拖拽元素都添加draggable='true'设置)

2.拖拽元素事件：

　　1). dragstart：拖拽前触发，即鼠标按下，被拖拽元素被拖拽的瞬间触发。

event.dataTransfer:传递数据，数据类型为字符串和文件类型。

event.dataTransfer的大部分设置均在这里配置,即通过event.dataTransfer来保存拖拽的数据，例如：e.dataTransfer.setData("Text", e.target.id);

event.dataTransfer.effectAllowed:用于设置被拖拽元素可执行的操作

example：event.dataTransfer.effectAllowed = "link";  限定dropEffect的属性值为link，否则会鼠标指针为禁止样式

触发dragstart事件后，其他元素的mousemove,mouseover,mouseenter,mouseleave,mouseout事件均不会被触发了

2). drag：拖拽前、拖拽结束之间连续触发，即使鼠标没有移动，只要未释放，都会触发。

3). dragend:拖拽结束触发，即释放鼠标触发。

3.目标元素事件：

1). dragenter：进入目标元素触发，相当于mouseover

2). dragover：被拖拽元素在目标元素上移动时触发，相当于mousemove

在该事件里填写： event.preventDefault() 。

　　　（注：事件的默认行为是不允许被拖拽元素在其他元素上释放或放置（即无法触发 drop 事件），需要通过 event.preventDefault() 来阻止默认行为才能触发后续的 drop 事件）

　　　 dropEffect：拖放的操作类型，决定了浏览器如何显示鼠标形状，可能的值为copy、move、link和none。

可以在这里设置dropEffect的值，事件的默认行为是将dropEffect设置为none。

例如:e.dataTransfer.dropEffect = "link"

3). dragleave：被拖拽元素离开目标元素时触发

4). drop：被拖拽元素放置在目标元素上时触发（释放鼠标）

(注:对于外来的被拖拽元素（超链接、文件、图片源）， drop 事件的默认行为是浏览器将当前页面重定向到被拖拽元素所指向的资源上

　　　　   对文档内部的被拖拽元素，IE10+和Chrome下的默认行为是不作为，而FF得默认行为是新打开一个文档用于访问被拖拽元素所指向的资源)

4.事件执行顺序

　　 1) drop不触发的时候：dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend

2) drop触发的时候（dragover阻止了默认事件）：dragstart  >  drag >  dragenter >  dragover >  drop > dragend

二：拖拽事件和Angular JS的结合

html

  1. <!DocType html>
  2. <html data-ng-app="myApp">
  3. <head>
  4.     <title>angularjs 和拖拽事件的结合</title>
  5.     <meta charset="utf-8" />
  6.     <script type="text/javascript" src="angular.js"></script>
  7.     <script type="text/javascript" src="dragdirective.js"></script>
  8.     <script type="text/javascript" src="mydrag.js"></script>
  9.     <style type="text/css">
  10.         .mydemo > div {
  11.             display: inline-block;
  12.         }
  13.  
  14.             .mydemo > div > div {
  15.                 width: 150px;
  16.                 height: 100px;
  17.                 border: 1px dotted grey;
  18.                 display: inline-block;
  19.                 float: left;
  20.                 margin-right: 20px;
  21.             }
  22.     </style>
  23. </head>
  24. <body data-ng-controller="myDragController as vm" class="mydemo">
  25.     <div>
  26.         <div ruby-drop="vm.drop(event)" ruby-dragover="vm.dragover(event)">
  27.             <img src="ruby.png" draggable="true" ruby-dragstart="vm.dragstart(event)" id="imgId" />
  28.         </div>
  29.         <div ruby-drop="vm.drop(event)" ruby-dragover="vm.dragover(event)"></div>
  30.     </div>
  31. </body>
  32. </html>

js->dragdirective.js

  1. (function () {
  2.     "use strict"
  3.     var convertFirstUpperCase = function (str) {
  4.         return str.replace(/(\w)/, function (s) {
  5.             return s.toUpperCase();
  6.         });
  7.     }
  8.     angular.module("myApp", []);
  9.     var myApp = angular.module("myApp"),
  10.         rubyDragEventDirectives = {};
  11.     angular.forEach("dragstart drag dragenter dragover drop dragleave dragend".split(' '), function (eventName) {
  12.         var rubyEventName = 'ruby' + convertFirstUpperCase(eventName);
  13.         rubyDragEventDirectives[rubyEventName] = ['$parse', function ($parse) {
  14.             //$parse 语句解析器
  15.             return {
  16.                 restrict: 'A',
  17.                 compile: function (ele, attr) {
  18.                     var fn = $parse(attr[rubyEventName]);
  19.                     return function rubyEventHandler(scope, ele) {
  20.                         ele[0].addEventListener(eventName, function (event) {
  21.                             if (eventName == 'dragover' || eventName == 'drop') {
  22.                                 event.preventDefault();
  23.                             }
  24.                             var callback = function () {
  25.                                 fn(scope, { event: event });
  26.                             };
  27.                             callback();
  28.                         });
  29.                     }
  30.                 }
  31.             }
  32.         }]
  33.     });
  34.     myApp.directive(rubyDragEventDirectives);
  35. })();

　　js->mydrag.js

  1. (function () {
  2.     "use strict"
  3.     if (window.angular) {
  4.         angular.module("myApp").controller("myDragController", myDragController);
  5.         myDragController.$inject = ['$scope'];
  6.         function myDragController($scope) {
  7.             $scope.vm.dragstart = function (e) {
  8.                 e.dataTransfer.setData("Text", e.target.id);
  9.             };
  10.             $scope.vm.dragover = function (e) {
  11.                 e.preventDefault();
  12.             };
  13.             $scope.vm.drop = function (e) {
  14.                 e.preventDefault();
  15.                 var data = e.dataTransfer.getData("Text");
  16.                 e.target.appendChild(document.getElementById(data));
  17.             };
  18.         }
  19.     }
  20. })();

Html5 拖拽行为和AngularJs的结合的更多相关文章

  1. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  2. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  3. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  4. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  6. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

  7. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. html5拖拽总结

    拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...

  9. HTML5拖拽实例

    最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...

随机推荐

  1. sed删除空行和开头的空格和tab键

    [root@ob1 scripts]# cat -An tt2.txt      1 jeyry$     2      ^I$     3 jfdkjfdjk$     4 ^Ikjfdkjfdkj ...

  2. 二、Linux 静态IP,动态IP配置

    Linux 静态IP,动态IP配置 第一步:激活网卡 系统装好后默认的网卡是eth0,用下面的命令将这块网卡激活. # ifconfig eth0 up 第二步:设置网卡进入系统时启动 想要每次开机就 ...

  3. d3js网络拓扑关系特效可视化展现

    d3js拓扑关系特效可视化展现 在上一篇d3js文档http://www.cnblogs.com/juandx/p/3959900.html中讲了简单的d3js方法和效果,现在我做一个完整的演示,使用 ...

  4. 彻底解决java WEB项目的文件路径问题(war包)

    在j2EE项目中,我们通常会把项目打包公布,通常是war包,作为独立单元,能够远程上传,载入,公布,还能够实现版本号控制,但这与我们开发过程中使用MyEclipse自己主动部署有所不同,下面做具体说明 ...

  5. jsp页面的el表达式取数据

    在jsp页面去Id时候要照上面的方式取,不能照下面的方式取:

  6. 关于Unity中stretch的分开使用、预制体、Scroll View的UI节点

    一.上次讲的菊花的四个花瓣,只讲了四个花瓣和在一起的时候的作用,现在是分开的菊花的四个花瓣的作用 1.创建一个Canvas2.对Canvas进行初始化3.创建一个Image的UI节点作为Canvas的 ...

  7. Graying the black box: Understanding DQNs

    Zahavy, Tom, Nir Ben-Zrihem, and Shie Mannor. "Graying the black box: Understanding DQNs." ...

  8. mac for appium环境安装

    之前写过windows 安装appium环境步骤. 1. 需求的前置条件如下 (mac 自动git.ruby.brew命令): 2. java  环境 3. git 环境 4. ruby环境 5. b ...

  9. 【转】 PreTranslateMessage作用和使用方法

    PreTranslateMessage作用和使用方法  PreTranslateMessage是消息在送给TranslateMessage函数之前被调用的,绝大多数本窗口的消息都要通过这里,比较常用, ...

  10. Can't connect to MySQL server on '192.168.7.175' (10060)

    原因: 1.你的ip没有被授权,无法访问. 2.端口没有打开(如:3306端口没有打开). 解决方法: 授权(http://www.cnblogs.com/SZxiaochun/p/6401424.h ...