HTML5 拖拽功能
<script>
var DragFile = function (goalId) {
var g = document.getElementById(goalId); RegDragFile(g, CostFunc_File_ondrop);
}; var CostFunc_File_ondrop = function (e, goalIdObj) { var fileObj = e.dataTransfer.files[0]; //创建一个读取文件的流
var fileR = new FileReader(); //加载文件时在目标域加上一个图片标签
fileR.onload = function (e) {
goalIdObj.innerHTML = "<img src=" + this.result + "/>";
}; //读取文件的地址
fileR.readAsDataURL(fileObj); };
var RegDragFile = function (goalIdObj, Cust_File_ondrop) {
goalIdObj.ondragover = function (e) {
//阻止系统默认操作(前后都要做操作)
e.preventDefault();
}; goalIdObj.ondrop = function (e) {
//阻止系统默认操作(前后都要做操作)
e.preventDefault(); //用户自定义函数
CostFunc_File_ondrop(e, this);
};
};
</script>
/**
* @author Zzq
*/
<script type="text/javascript">
var Act = {};
Act.DragAction = undefined; (function () { var DragAction_GoalArray = function (goalIdArray, sourceId) {
goalIdArray = goalIdArray || [];
var Exec = " "; for (var ele in goalIdArray) {
Exec += DragAction(goalIdArray[ele], sourceId) + " ";
} return new Function(Exec);
}; var DragAction = function (goalId, sourceId) {
var g = document.getElementById(goalId);
var s = document.getElementById(sourceId); RegDragAction(g, s, Cust_ondrop, Cust_ondragstart);
}; var Cust_ondrop = function (e, goalIdObj) {
var tmpObj = document.getElementById(e.dataTransfer.getData("sId"));
goalIdObj.appendChild(tmpObj);
}; var Cust_ondragstart = function (e, sourceId) {
//实质就是传给句柄的一个数据槽(所以第一个参数自定义即可)
e.dataTransfer.setData("sId", sourceId);
}; var RegDragAction = function (goalIdObj, sourceIdObj, CostFunc_ondrop, CostFunc_ondragstart) {
goalIdObj.ondragover = function (e) {
//阻止系统默认操作(前后都要做操作)
e.preventDefault();
}; goalIdObj.ondrop = function (e) {
//阻止系统默认操作(前后都要做操作)
e.preventDefault(); //用户自定义函数
CostFunc_ondrop(e, this);
}; sourceIdObj.ondragstart = function (e) {
//用户自定义函数
CostFunc_ondragstart(e, this.getAttribute("id"));
};
}; Act.DragAction = DragAction_GoalArray; })(); onload = function () {
var Ary = ["a2", "a3", "a4"]; Act.DragAction(Ary, "a1");
}
</script>
HTML5 拖拽功能的更多相关文章
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- HTML5拖拽功能drag
1.创建拖拽对象 给需要拖拽的元素设置draggable属性,它有三个值: true:元素可以被拖拽:false:元素不能被拖拽:auto: 浏览器自己判断元素是否能被拖拽. 2.处理拖拽事件当我们拖 ...
- html5中的拖拽功能
拖拽元素支持的事件 ondrag 应用于拖拽元素,整个拖拽过程都会调用 ondragstart 应用于拖拽元素,当拖拽开始时调用 ondragleave 应用于拖拽元素,当鼠标离开拖拽元素是调用 on ...
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
- HTML5 拖拽实现
简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...
- JQuery UI的拖拽功能实现方法小结
JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念 ...
- RCP:拖拽功能的实现 Drag and Drop
SWT中的拖拽是使用的org.eclipse.swt.dnd. 有三个需要密切注意的类: 1.DragSource 2.DropTarget 3.Transfer DragSource封装了需要被拖拽 ...
- js实现登陆页面的拖拽功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...
随机推荐
- 排序+逆向思维 ACdream 1205 Disappeared Block
题目传送门 /* 从大到小排序,逆向思维,从最后开始考虑,无后向性 每找到一个没被淹没的,对它左右的楼层查询是否它是孤立的,若是++,若不是-- 复杂度 O(n + m),还以为 O(n^2)吓得写了 ...
- Self Numbers[HDU1128]
Self Numbers Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- 【wikioi】1108 方块游戏(模拟)
http://wikioi.com/problem/1108/ 这题有点变态,因为他根本没有策略! 还是说这题不是实时的?反正这题很变态,是在一个时间段同时消除所有的行列斜边,同一时间!!!!!! 所 ...
- SpringMVC、Struts1、Struts2和SSH2框架中单例与多例的解析
struts1是单例提供服务,请求数据绑定在actionform里,form当做参数传入调用方法,不用实例变量就不会出现并发问题. spring mvc的contrller也是这样的模式 struts ...
- elasticsearch1.0 升级2.2的数据备份和恢复
近期由于elasticsearch的版本升级,需要研究下elasticsearch的快照(snapshot)和恢复(restore)功能. 先说下背景,目前环境采用的是elasticsearch1 ...
- JQuery的定义
JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera ...
- 通过SEP禁用USB
1 Introduction 1.1 Scope This document provides comprehensive information of the reinforce ...
- svn搭建,很简单
yum install subversion 2015年1月7日15:23:07 我测试的时间 系统是centos6.5 直接yum,centos是可以直接解决apr apr-util 依赖问题,如果 ...
- eXosip2代码分析
主要类型定义: 1.struct eXtl_protocol struct eXtl_protocol { int enabled; int proto_port; ]; ]; int proto_n ...
- Web 在线文件管理器学习笔记与总结(8)删除文件
unlink($filename) 删除文件 index.php: <?php require 'dir.func.php'; require 'file.func.php'; require ...