码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 拖拽功能

时间:2015-03-02 16:26:23      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

本地文件拖动到页面实例:(支持IE)
<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>

  

  

页面元素拖动实例:(不支持IE)
 
   /**
    * @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 拖拽功能

标签:

原文地址:http://www.cnblogs.com/zzq-include/p/4308690.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!