html5拖拽(非IE方式)

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


你可能感兴趣的:(html5拖拽(非IE方式))