html5拖拽(非IE方式)

    Html5的拖放功能是在原先Internet Exploer5中实现的功能基础上重新制定的标准，但是新的HTML5的拖放功能与原IE中实现的方式有所差别，不具有完全的互换性，这里首先制作可在Firefox、Safari、Chrom中运行的实例，然后再制作可以在IE中运行的实例。

  <!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>html5文件拖放(非IE形式)Firefox,Safari,Chrom</title>

    <style>

        #scrarea{

            margin: 0 auto;

            border: 1px solid gray;

            width: 1020px;

            height: 200px;

        }

        .item{

            border: 1px solid green;

            width: 150px;

            height: 150px;

            margin-top: 25px;

            margin-left: 15px;

            float: left;

        }

        #dragarea{

            margin: 0 auto;

            border: 1px solid gray;

            margin-top: 20px;

            width: 1020px;

            height: 200px;

        }

        #item6{

            background: gray;

        }

       

        [draggable=true]{

            -webkit-user-drag:element;

        }

    </style>

    <script>

        (function(){

           

            window.addEventListener("load",function(){

                //首先取得我们要拖动的元素,取得我们scrarea下边要拖动的元素，并且class为item

                var ele=document.querySelectorAll("#scrarea [class=item]");

                //给拖动元素添加dragstart事件的处理代码

                for(var i=0;i<ele.length;i++){

                    ele[i].addEventListener("dragstart",function(evt){

                        var elm=evt.target;

                        //将我们但却拖拽元素的id放到我们的evt的Data

                        evt.dataTransfer.setData("Text",elm.id);

                       

                        evt.stopPropagation();

                    },false);

                }

                //接收方区域追加各种事件处理

                var droparea=document.getElementByIdx_x("dragarea");

               

                //拖动元素进入时

                droparea.addEventListener("dragenter",function(evt){

                    evt.preventDefault();

                },false);

                //拖动中

                dragarea.addEventListener("dragover",function(evt){

                    evt.preventDefault();

                },false);

                //拖动元素被放下的时候

                dragarea.addEventListener("drop",function(evt){

                    var elm=evt.target;

                    var id=evt.dataTransfer.getData("Text");

                    var target=document.getElementByIdx_x(id);

                    if(target){

                        //移动元素

                        droparea.a(target);

                    }

                    evt.preventDefault();

                },true);

            },false);

        })();

    </script>

</head>

<body>

       <!--

            1，div元素设置draggable="true"只有设置了此属性，div元素才能够被拖动

            2，而img元素以及设置了href属性的a元素，都是默认可被拖动的，不需要再设置draggable属性了

            3，支持draggable属性的浏览器目前为止只有Chrome（5以后的版本）、Safari 5.在Firefox 3.6以后的版本中，不管有没有设置属性

               只要在dataTranfer对象的setData()方法设置了消息，就可被拖动

            4，在旧的Safari4中不支持draggable属性，可以借助css的力量，让div元素变成为可拖动

               [draggable-true]{

                    -webkit-user-drag:element;

               }

       -->

       <h3 style="text-align: center">html5拖拽(非IE方式)</h3>

       <div id="scrarea">

           <img src="instrument/erhu.jpg" class="item" id="item1">

           <img src="instrument/dizi.jpg" class="item" id="item2">

           <img src="instrument/jita.jpg" class="item" id="item3">

           <img src="instrument/jiazigu.jpg" class="item" id="item4">

           <img src="instrument/guzheng.jpg" class="item" id="item5">

           <div draggable="true" class="item" id="item6"></div>

       </div>

       <div id="dragarea">

       </div>

</body>

</html>