HTML5:Drag&Drop拖拽操作

在我用键盘打下这几个字的时候,Drag和Drop的操作在Chrome和Firefox中仍然无法统一

本篇只介绍Chrome的Drag&Drop操作

参考文档:https://developer.mozilla.org/En/DragDrop/DragandDrop

首先,这个是HTML5新加入的功能,但实际上已经在早期的IE浏览器中获得了部分支持.

但这个功能在Firefox和Chrome中的反应大不相同,所以兼容性较差,现在还不推荐使用(当然你也可以自己完善两者的兼容性).

Chrome中所使用的代码:

<!DOCTYPE html>  
<html>  
    <head>
        <title>Drag Example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            div{
                border:1px solid cadetblue;
                width:200px;
                margin-bottom: 5px;
                padding:5px;
                background-color:skyblue;
            }
            #box,#dragme{
                width:100px;
                height:100px;
            }
        </style>
        <script src="/js/jquery-1.6.2.min.js"></script>
        <script>
            $(document).ready(function(event){
                $("#dragme")
                .bind("drag",function(){
                    $(".indrag").css("background-color","skyblue");
                    $("#drag").css("background-color", "greenyellow");
                })
                .bind("dragend",function(event){
                    $(".indrag").css("background-color","skyblue");
                    $("#dragend").css("background-color","greenyellow");
                })
                .bind("dragstart",function(event){
                    $(".indrag").css("background-color","skyblue");
                    $("#dragstart").css("background-color","greenyellow");
                })
                $("#box")
                .bind("dragenter",function(event){
                    $(".inbox").css("background-color","skyblue");
                    $("#dragenter").css("background-color","greenyellow");
                })
                .bind("dragleave",function(event){
                    $(".inbox").css("background-color","skyblue");
                    $("#dragleave").css("background-color","greenyellow");
                })
                .bind("dragover",function(event){
                    $(".inbox").css("background-color","skyblue");
                    $("#dragover").css("background-color","greenyellow");
                })
                .bind("drop",function(event){
                    $(".inbox").css("background-color","skyblue");
                    $("#drop").css("background-color","greenyellow");
                });
            });
        </script>
    </head>
    <body>
        <div id="dragme" draggable="true">Drag me!</div>
        <div id="box">Box</div>
        <div id="drag" class="indrag">ondrag</div>
        <div id="dragstart" class="indrag">ondragstart</div>
        <div id="dragend" class="indrag">ondragend</div>
        <div id="dragenter" class="inbox">ondragenter</div>
        <div id="dragleave" class="inbox">ondragleave</div>
        <div id="dragover" class="inbox">ondragover</div>
        <div id="drop" class="inbox">ondrop</div>
    </body>
</html>  

这里将id为dragme的div元素的draggable属性定义为true,这表明该元素可以用来进行drag操作,也就是文字意义上的”拖动”.

定义了draggable后,相应的事件才会被触发.

在js代码部分,给id为dragme和box的两个div元素添加了事件监听,其中dragme会触发ondrag,ondragstart,ondragend事件,box会触发ondragenter,ondragleave,ondragover,ondrop事件.

其中ondragstart和ondragenter在chrome无法正常被触发(从我这里的情况来看,是这样,但也可能是jQuery或我代码的问题)

DEMO

拖拽dragme元素相应的div灰色表示事件被触发.

从拖拽的元素中获取信息请参考此页:https://developer.mozilla.org/En/DragDrop/DataTransfer