Html5 拖拽行为和AngularJs的结合
一. 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
<!DocType html>
<html data-ng-app="myApp">
<head>
<title>angularjs 和拖拽事件的结合</title>
<meta charset="utf-8" />
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="dragdirective.js"></script>
<script type="text/javascript" src="mydrag.js"></script>
<style type="text/css">
.mydemo > div {
display: inline-block;
} .mydemo > div > div {
width: 150px;
height: 100px;
border: 1px dotted grey;
display: inline-block;
float: left;
margin-right: 20px;
}
</style>
</head>
<body data-ng-controller="myDragController as vm" class="mydemo">
<div>
<div ruby-drop="vm.drop(event)" ruby-dragover="vm.dragover(event)">
<img src="ruby.png" draggable="true" ruby-dragstart="vm.dragstart(event)" id="imgId" />
</div>
<div ruby-drop="vm.drop(event)" ruby-dragover="vm.dragover(event)"></div>
</div>
</body>
</html>
js->dragdirective.js
(function () {
"use strict"
var convertFirstUpperCase = function (str) {
return str.replace(/(\w)/, function (s) {
return s.toUpperCase();
});
}
angular.module("myApp", []);
var myApp = angular.module("myApp"),
rubyDragEventDirectives = {};
angular.forEach("dragstart drag dragenter dragover drop dragleave dragend".split(' '), function (eventName) {
var rubyEventName = 'ruby' + convertFirstUpperCase(eventName);
rubyDragEventDirectives[rubyEventName] = ['$parse', function ($parse) {
//$parse 语句解析器
return {
restrict: 'A',
compile: function (ele, attr) {
var fn = $parse(attr[rubyEventName]);
return function rubyEventHandler(scope, ele) {
ele[0].addEventListener(eventName, function (event) {
if (eventName == 'dragover' || eventName == 'drop') {
event.preventDefault();
}
var callback = function () {
fn(scope, { event: event });
};
callback();
});
}
}
}
}]
});
myApp.directive(rubyDragEventDirectives);
})();
js->mydrag.js
(function () {
"use strict"
if (window.angular) {
angular.module("myApp").controller("myDragController", myDragController);
myDragController.$inject = ['$scope'];
function myDragController($scope) {
$scope.vm.dragstart = function (e) {
e.dataTransfer.setData("Text", e.target.id);
};
$scope.vm.dragover = function (e) {
e.preventDefault();
};
$scope.vm.drop = function (e) {
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
};
}
}
})();
Html5 拖拽行为和AngularJs的结合的更多相关文章
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...
- HTML5拖拽实例
最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...
随机推荐
- 小任务tasklet应用
一个使用tasklet的中断程序首先会通过执行中断处理程序来快速完成上半部分的工作,接着通过调度tasklet使得下半部分的工作得以完成,但是下半部分何时执行属于内核的工作. 由于tasklet依靠软 ...
- EMC现场测试-EFT、ESD、Surge和场辐射
EMC测试主要进行了4项: 1. ESD 采用静电枪测试,接触电压±6KV,检测了整个箱体和内部可见金属部分: 空气放电正负8KV,检测了箱体及内部金属部分(如板卡壳体),特别检测了220V电源插头及 ...
- Mac下面的SecureCRT(附破解方案) 更新到最新的7.2的破解方案
继续更新到7.2的破解.只是升级了下secureCRT到7.2,方法还是不变 相信很多人升级到了7.2的SecureCRT之后原来的破解方案失效了,一直也有人问新的破解方案,发现了,不敢独享放上crt ...
- pip安装的python扩展模块自定义目录
根据系统不同: Windows是python目录下Lib\site-packages\: Linux是/usr/local/lib/python/dist-packages/.
- Spring Session + Redis实现分布式Session共享
发表于 2016-09-29 文章目录 1. Maven依赖 2. 配置Filter 3. Spring配置文件 4. 解决Redis云服务Unable to configure Redis to k ...
- javascript实现记录文本框内文字个数
最近在做一个项目中遇到这样一个问题,要对文本框中用户输入的文字进行记数,在下面显示出来,因为我们做的是一个短信发送平台,现在我们国家的短信服务,如果你的信息超过了70个字符,短信就会按二条给你下发.所 ...
- 关于Unity中的帧动画组件的编写
一.帧动画 1: 美术准备好一个连续动作的离散图片;2: 程序在准确的时间来切换这个图片;3: 优点: 简单,速度快; 缺点:资源占用相对过大; 二.frame_anim组件编写 1: 代码里面强制要 ...
- hibernate中一对多多对一关系设计的理解
1.单向多对一和双向多对一的区别? 只需要从一方获取另一方的数据时 就使用单向关联双方都需要获取对方数据时 就使用双向关系 部门--人员 使用人员时如果只需要获取对应部门信息(user.getdept ...
- oracle jar
关于oracle 11g jdbc驱动 的jar包 (2012-11-21 11:17:41)转载▼ 标签: 杂谈 分类:java学习 oracle11的jdbc\lib下没有classer12.ja ...
- HDU 1556 Color the ball 树状数组 题解
Problem Description N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的"小飞鸽"牌电动 ...