HTML5中實(shí)現(xiàn)拖放效果無須借助javascript

    在Web開發(fā)中，我們要實(shí)現(xiàn)拖放效果，需要借助Javascript。今天讓我們使用Html5實(shí)現(xiàn)它：
    先看html核心代碼:
    代碼如下:
    <div>
    <p>把黃色小方塊拖入到紅色大方框中</p>
    </div>
    <div id="item" draggable="true">
    </div>
    <div id="drop">
    </div>
    draggable屬性是html5新增加的，它有三個(gè)值true,false,auto. true是可以拖，false是不可以，auto由用戶瀏覽器是否支持而定。更多請(qǐng)可以參考官方文檔.
    加上一點(diǎn)兒樣式:
    代碼如下:
    <style type="text/css">
    #drop
    {
    width: 300px;
    height: 200px;
    background-color: #ff0000;
    padding: 5px;
    border: 2px solid #000000;
    }
    #item
    {
    width: 100px;
    height: 100px;
    background-color: #ffff00;
    padding: 5px;
    margin: 20px;
    border: 1px dashed #000000;
    }
    *[draggable=true] {
    -moz-user-select:none;
    -khtml-user-drag: element;
    cursor: move;
    }
    *:-khtml-drag {
    background-color: rgba(238,238,238, 0.5);
    }
    </style>
    然后我們來看javascript:
    代碼如下:
    function listenEvent(eventTarget, eventType, eventHandler) {
    if (eventTarget.addEventListener) {
    eventTarget.addEventListener(eventType, eventHandler,false);
    } else if (eventTarget.attachEvent) {
    eventType = "on" + eventType;
    eventTarget.attachEvent(eventType, eventHandler);
    } else {
    eventTarget["on" + eventType] = eventHandler;
    }
    }
    // cancel event
    function cancelEvent (event) {
    if (event.preventDefault) {
    event.preventDefault();
    } else {
    event.returnValue = false;
    }
    }
    // cancel propagation
    function cancelPropagation (event) {
    if (event.stopPropagation) {
    event.stopPropagation();
    } else {
    event.cancelBubble = true;
    }
    }
    window.onload=function() {
    var target = document.getElementById("drop");
    listenEvent(target,"dragenter",cancelEvent);
    listenEvent(target,"dragover", dragOver);
    listenEvent(target,"drop",function (evt) {
    cancelPropagation(evt);
    evt = evt || window.event;
    evt.dataTransfer.dropEffect = 'copy';
    var id = evt.dataTransfer.getData("Text");
    target.appendChild(document.getElementById(id));
    });
    var item = document.getElementById("item");
    item.setAttribute("draggable", "true");
    listenEvent(item,"dragstart", function(evt) {
    evt = evt || window.event;
    evt.dataTransfer.effectAllowed = 'copy';
    evt.dataTransfer.setData("Text",item.id);
    });
    };
    function dragOver(evt) {
    if (evt.preventDefault) evt.preventDefault();
    evt = evt || window.event;
    evt.dataTransfer.dropEffect = 'copy';
    return false;
    }
    由上面的代碼我們看使用一組HTML5 提供的拖放Events,直接來看下面:
    dragstart
    Drag event starts.
    drag
    During the drag operation.
    dragenter
    Drag is over the target; used to determine if target will accept drop.
    dragover
    Drag is over target; used to determine feedback to user.
    drop
    Drop occurs.
    dragleave
    Drag leaves target.
    dragend
    Drag operation ends.
    定義了相關(guān)的事件，來實(shí)現(xiàn)想要功能。上面的Js不難看懂。
    你可以自己試一下，目前在Opera支持最好，IE效果并不好。
    希望對(duì)您Web開發(fā)有幫助.