drag & drop 拖拽与拖放简介

1. DataTransfer 对象：退拽对象用来传递的媒介，使用一般为Event.dataTransfer。

2. draggable 属性：就是标签元素要设置draggable=true，否则不会有效果

，例如：

<div title="拖拽我" draggable="true">列表1</div>

1. ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
2. ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
3. ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
4. ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
5. ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
6. Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行
7. preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
8. Event.effectAllowed 属性：就是拖拽的效果。

下面是一个拖放外部程序图片的实例：

html代码：

<form id="frm">
    <fieldset>
        <legend>用拖动的方式选择文件：</legend>
        <ul id="upload" ondrop="dropFile(event)" ondragenter="return false;" ondragover="return false;" ></ul>
    </fieldset>
</form>

js代码：

<script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        function loadFun(file){
            return function(e){
                var str=document.createElement(‘span‘);
                str.innerHTML=[‘<img src="‘,e.target.result,‘" title="‘,file.name,‘"/>‘].join(‘‘);
                $(‘upload‘).insertBefore(str,null);
            }
        };

        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();
        }

</script>

效果如下图：