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

关键字：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

posted @ 2014-09-05 16:14  Ldlchina  阅读(485)  评论(0)  编辑  收藏  举报