HTML5:一个拖拽网页元素的例子

时间：2022-07-08 20:30:14

关键字：HTML5, Drag&Drop, JavaScript, CSS

运行环境：Chrome

    <!DOCTYPE html>

    <html>

    <head>

        <title>example</title>

        <style type="text/css">

            .main-area {

                margin-left: 10%;

                margin-right: 10%;

                min-width: 600px;

            }

            ul {

                padding-left: 0;

                text-align:center;

            }

            li {

                word-break: break-all;

                display: inline-block;

                width: 400px;

                height: 200px;

                margin: 3px;

                border-radius: 3px;

                box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);

            }

        </style>

    </head>

    <body>

        <script>

            // on source element

            function dragstart (ev) {

                ev.dataTransfer.effectAllowed = "move";

                ev.dataTransfer.setData("srcId", ev.currentTarget.id);

                ev.dataTransfer.setDragImage(ev.currentTarget, 0, 0);

            }

            function dragend(ev) {

                ev.dataTransfer.clearData("srcId");

            }

            // on target element

            function dragover(ev) {

                ev.preventDefault();

            }

            function drop(ev) {

                var srcId = ev.dataTransfer.getData("srcId");

                var srcObj = document.getElementById(srcId);

                if(srcObj != ev.currentTarget){

                    var list = document.getElementById('list');

                    list.insertBefore(srcObj, ev.currentTarget);

                }

            }

        </script>

        <div id='main-area'>

            <ul id='list'>

                <li id='1' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">

                    111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111

                </li><li id='2' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">

                    222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222

                </li><li id='3' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">

                    333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333

                </li><li id='4' draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)" ondragover="dragover(event)" ondrop="drop(event)">

                    444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444444

                </li>

            </ul>

        </div>

    </body>

    </html>

注：如果每个li之间换行，将会有空格产生。参考问题：http://*.com/questions/25520904/html5-reorder-the-children-li-of-ul-by-drag-and-drop-the-borders-between-li-el

相关文章