一. 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. WCF客户端获取服务器返回数据报错

    错误信息:An error occurred while receiving the HTTP response to http://127.0.0.1/SIHIS/Infection/PubExec ...

  2. Apache2.4.x版wampserver本地php服务器如何让外网访问及启用.htaccess

    http://www.jb51.net/article/61193.htm ———————————————————————————————————————————— 这篇文章主要介绍了Apache2. ...

  3. PHP注释的艺术——phpDoc规范

    用过IDE或看过其他源码的小伙伴们应该都见过类似下面这样的注释   /** * 递归获取所有游戏分类 * @param int $id * @return array */ 看得多了就大概知道了一些规 ...

  4. volatile关键字的介绍和使用

    关键字volatile的主要作用是使变量在过个线程中可见 1.假设volatile不存在我们将会面对的问题 public class PrintString implements Runnable { ...

  5. RunnableException与CheckedException

    Checked Exception 编译时异常 编译的时候检查你的代码可能在运行的时候抛出异常,这通常在编译的时候要去处理的. RunnableException 运行时异常,可以编译通过,但如果不处 ...

  6. 各个层次的gcc警告

    http://blog.csdn.net/lizzywu/article/details/9419145 各个层次的gcc警告从上到下覆盖 变量(代码)级:指定某个变量警告 int a __attri ...

  7. Android Studio编译错误：Unexpected lock protocol found in lock file. Expected 3, found 0.

    如果不小心手动修改了.gradle文件夹中的内容,那么再打开之前编译成功的工程时,会出现类似下面的错误: Gradle app neame project refresh failed: Unexpe ...

  8. e675. 翻转缓冲图像

    // To create a buffered image, see e666 创建缓冲图像 // Flip the image vertically AffineTransform tx = Aff ...

  9. PID控制器的应用：控制网络爬虫抓取速度

    一.初识PID控制器 冬天乡下人喜欢烤火取暖,常见的情形就是四人围着麻将桌,桌底放一盆碳火.有人觉得火不够大,那加点木炭吧,还不够,再加点.片刻之后,又觉得火太大,脚都快被烤熟了,那就取出一些木碳…… ...

  10. perl 中的哈希赋值

    在perl 中,通过代码动态的给哈希赋值,是最常见的应用场景,但是有些情况下,我们事先知道一些信息,当需要把这些信息存放进一个哈希的时候,直接给哈希赋值就好: 哈希的key不用说,就是一个字符串,关键 ...