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>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。