HTML5中的拖放实现详解

时间：2017-09-23

演示代码

<!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中的拖放相关资料介绍，需要的朋友可以参考一下。

共2页:

2/2下一篇

上一篇：HTML5 移动页面自适应手机屏幕四类方法总结 下一篇：html5如何在Canvas中实现自定义路径动画示例

HTML5中的拖放实现详解

相关文章

最新文章