HTML5中的拖放实现详解

关于HTML5中的拖放

拖放（Drag 和 Drop）是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的组成部分。在HTML5中用户可以使用鼠标选择一个可拖动元素，将元素拖动到一个可放置元素，并通过释放鼠标按钮放到这些元素。在拖动操作期间，可拖动元素的半透明表示跟随鼠标指针。

如果我们希望元素可以被拖动，那么需要将其 draggable属性设为true (a标签draggable默认是true)

拖放的事件

在进行拖放操作的不同阶段会触发数种事件，拖拽事件的datatransfer属性存放了拖放操作中的相关数据。

(在拖拽的时候只会触发拖拽的相关事件，鼠标事件，例如mouSEMove，是不会触发的）

DataTransfer 对象

在处理拖放操作时，我们需要用到 DataTransfer 对象来保存被拖动的数据。 DataTransfer 可以保存一项或多项数据、一种或者多种数据类型。
属性

方法

浏览器支持

internet Explorer 9+、Firefox、opera 12、Chrome 以及 Safari 5+

演示代码

!DOCTYPE html>
    html>
    head>
    meta charset="UTF-8">
    title>
    Drag &
     Drop/title>
    style type="text/css">
.box {
        display: inline-block;
        width: 100px;
        height: 100px;
        border: 1px solid #cccCFf;
        background-color: #ccccff;
        text-align: center;
        line-height: 100px;
}
.bin {
        width: 200px;
        height: 200px;
        padding: 10px;
        border: 1px solid #ccccff;
        overflow: hidden;
        float: left;
}
    /style>
    /head>
    body>
        div style="display: table;
    ">
            div class="bin">
                div class="box" draggable="true">
    可拖拽元素/div>
            /div>
            div class="bin">
    &
    nbsp;
    /div>
        /div>
        script type="text/javascript">
            VAR bins = document.querySelectorAll('.bin');
            var boxs = document.querySelectorAll('.box');
            var drag = null;
            for (var i = 0;
     i  boxs.length;
 i++) {
                var box = boxs[i];
            box.onselectstart = function() {
                    return false;
            }
    ;
            box.ondragstart = function(e) {
                    e.dataTransfer.effectAllowed = 'move';
                    e.dataTransfer.setData('text/plain', e.target.outerHTML);
                    e.dataTransfer.setDragImage(e.target, 0, 0);
                    drag = this;
                    return true;
            }
    ;
            box.ondragend = function(e) {
                    drag = null;
                return false            }
    ;
        }
            for (var i = 0;
     i  bins.length;
 i++) {
                var bin = bins[i];
            //当拖曳元素进入目标元素            bin.ondragover = function(e) {
                    e.PReentDefault();
                    return true;
            }
    ;
            //拖拽元素在目标元素上移动            bin.ondragenter = function(e) {
                    this.style.backgroundColor = '#eeeeff';
                    return true;
            }
    ;
            //拖拽元素在目标元素上离开            bin.ondragleave = function(e) {
                    this.style.backgroundColor = '#fff';
                    return true;
            }
    ;
            //拖拽的元素在目标元素上同时鼠标放开            bin.ondrop = function(e) {
                if (drag) {
                        drag.parentNode.removeChild(drag);
                        this.appendChild(drag);
                }
                    this.style.backgroundColor = '#fff';
                    return false;
            }
    ;
        }
        document.body.ondrop = function(e) {
                e.preventDefault();
                e.stopPropagation();
        }
        /script>
    /body>
    /html>
    

以上就是HTML5中的拖放相关资料介绍，需要的朋友可以参考一下。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！