HTML5 拖拽功能

本地文件拖动到页面实例：（支持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>