html5 拖拽练习题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5 拖拽练习题相关的知识,希望对你有一定的参考价值。

html5新的拖拽 只支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

来一个实例:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        table td{
            width:120px;
            height:50px;
            border:1px solid #000;
        }
        table td div.dragDiv{
            margin:3px;
            border:1px solid #444;
            padding:3px;
            cursor:pointer;
        }
    </style>
  
</head>
<body>

    <table>
        <tr>
            <td>
                <div class="dragDiv">我是要拖动的</div>
            </td>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr><tr>
    <td>
        <div class="dragDiv">我是第二个</div>
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
    </table>

    <p>请把 W3School 的图片拖放到矩形中:</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img id="drag1" src="images/bigSwim7.png" draggable="true" ondragstart="drag(event)" />
    <script src="js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        //对表格中的DIV拖拽
        var tempData = "";
        $("table td div.dragDiv").each(function () {
            this.draggable = true;
            this.ondragstart = function (e) {
                if (this == e.target) {
                    e.dataTransfer.setData("id", e.target.innerHTML);
                    tempData = this;
                }
            }
        });
        $("table td").each(function () {
            this.ondragover = function (e) {
                e.preventDefault();
            }
            this.ondrop = function (e) {
                if (this == e.target) {
                    e.preventDefault();
                    e.target.appendChild(tempData);
                    tempData = "";
                }
            }
        })

        //图片拖拽
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</body>
</html>

 

以上是关于html5 拖拽练习题的主要内容,如果未能解决你的问题,请参考以下文章

html5的元素拖拽

html5 audio标签,播放条无法拖拽快进和后退。

常用HTML5代码片段

十个html5代码片段,超实用,一定要收藏

html5拖拽图片上传,怎么获得图片原始尺寸

Html5 的拖拽功能