<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
.droptarget {
    float: left; 
    width: 100px; 
    height: 35px;
    margin: 15px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
 
</head>
<body>
    <p id="div1" onclick="stopPropagation(event);" ondragstart="dragStart(event)"   draggable="true" >
         test
    </p>
    <div onclick="alert(1);" ondrop="dropob(event);" ondragover="allowDrop(event)"  class="droptarget">
 
    </div>
    <div ondrop="dropob(event);" ondragover="allowDrop(event)"  class="droptarget">
 
    </div>
    <ul id="fileList">
 
    </ul>
    <form>
         <fieldset> 
             <legend>用拖动的方式选择文件：</legend> 
             <ul id="upload" ondrop="dropFile(event)"  ondragenter="return false;" ondragover="return false;" >
 
             </ul> 
         </fieldset>
    </form>    
    <script type="text/javascript">    
        //拖动开始保存对象ID
        function dragStart() {
            try{
                event.dataTransfer.setData("Text", event.target.id);
            }catch(e){}           
        }
        //阻止默认事件(比如a的话会阻止页面跳转，submit的话会阻止提交..)
        function allowDrop(event) {
            event.preventDefault();
        }
        //释放对象
       function dropob () {
            event.preventDefault();
            if (event.target.className == "droptarget") {
                var data = event.dataTransfer.getData("Text");
                event.target.appendChild(document.getElementById(data));             
            }          
       }
       function $(id) {
           return document.getElementById(id);
       }
       function guid() {
           function S4() {
               return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
           }
           return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
       }
        //添加文件缩略图
       function loadFun(file) {
 
           return function (e) {
 
               var str = document.createElement('span');
 
               str.innerHTML = ['<img draggable="true" onclick="stopPropagation(event);" ondragstart="dragStart(event);"   src="', e.target.result, '" id="img' + guid()+ '"', ' title="', file.name, '"/>'].join('');
 
               $('upload').appendChild(str);
 
           }
 
       };
        //加载文件,
       function uploadFile(f) {
 
           if (typeof FileReader == 'undefined') {
 
               alert('浏览器不支持 FileReader对象')
 
               return false;
           }
 
           for (var i = 0; i < f.length; i++) {
 
               var reader = new FileReader();
 
               reader.readAsDataURL(f[i]);
 
               reader.onload = loadFun(f[i]);
 
           }
       }
        //释放拖拽的文件
       function dropFile(e) {
 
           uploadFile(e.dataTransfer.files);
 
           e.stopPropagation();
 
           e.preventDefault();
 
       }
        //停止冒泡
       function stopPropagation()
       {
           event.stopImmediatePropagation();//立即停止冒泡，当前对象后续未执行的事件也不再执行
          // event.stopPropagation();//停止冒泡，不会执行父对象中的事件
       } 
    </script>
</body>
</html>
 
// event.dataTransfer对象介绍
成员表
属性描述
dropEffect 设置或获取拖曳操作的类型和要显示的光标类型。
effectAllowed 设置或获取数据传送操作可应用于该对象的源元素。

方法

方法描述
clearData 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。
getData 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。
setData 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。
//window.clipboardData对象介绍

成员表

方法

方法描述
clearData 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。
getData 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。
setData 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。