首页 > 代码库 > HTML5:一个拖拽网页元素的例子

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

2024-07-21 08:03:10   224人阅读

关键字：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://stackoverflow.com/questions/25520904/html5-reorder-the-children-li-of-ul-by-drag-and-drop-the-borders-between-li-el

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


联系
我们