HTML5拖拽+demo

有兩個星期沒寫博客了，今天晚上和兄弟出去喝了幾杯酒，乘着酒意寫下這篇兩個星期前一直想寫的博客，再堅持一會就雙12了，搶個商品，哎不廢話了，說正經事。 拖拽事件相似於鼠標的一系列事件，有

• ondragstart，對象是被拖拽元素
• ondrag，對象是被拖拽元素
• ondragenter，對象是目標元素
• ondragover，對象是目標元素
• ondragleave，對象是目標元素
• ondrop，對象是目標元素
• ondragend，對象是被拖拽元素

拖拽（拖放）大體分爲兩個過程，即拖（drag）與放（drop），因此下文都稱爲拖放，HTML5的拖放事件用起來簡單，主要得益於能夠經過event對象得到拖拽的相關數據，即獲取到被拖對象和目標位置對象。

W3C網站對拖放有簡單的介紹：http://www.w3school.com.cn/html5/html_5_draganddrop.asp （先閱讀）。 能夠清楚，得到被拖拽對象是經過event對象的兩個方法，以下：

ev.dataTransfer.setData("Text",ev.target.id);
ev.dataTransfer.getData("Text");

而得到目標對象是經過ev.target方法，因此認識到了這兩點就抓住了拖放的主要內容。 下面是我本身寫的一個小demo。 html代碼以下：

<div id="left_out">
        <div id="header_name">
            <h2>拖動客戶制定計劃</h2>
        </div>
        <ul>
            <li title="拖拽我到右側">拖拽我1</li>
            <li title="拖拽我到右側">拖拽我2</li>
            <li title="拖拽我到右側">拖拽我3</li>
            <li title="拖拽我到右側">拖拽我4</li>
        </ul>
    </div>
    <div id="right_out">
        <div class="weekBox" id="week1"><h2>週一</h2></div>
        <div class="weekBox" id="week2"><h2>週二</h2></div>
        <div class="weekBox" id="week3"><h2>週三</h2></div>
        <div class="weekBox" id="week4"><h2>週四</h2></div>
        <div class="weekBox" id="week5"><h2>週五</h2></div>
        <div class="weekBox" id="week6"><h2>週六</h2></div>
        <div class="weekBox" id="week7"><h2>週日</h2></div>
    </div>

css代碼以下：

#left_out{
    width: 180px;
    height: 400px;
    float: left;
    border: 1px solid #cccccc;
    margin-right: 5PX;
}

#header_name{
    padding: 10px;
    text-align: center;
    background: #cccccc;
}


#left_out #header_name h2{
    font-weight: 900;
    font-size: 16px;
}

#left_out ul{
    width: 180px;
    height: 400px;
}

#left_out ul li{
    margin-top: 3px;
    font-size: 14px;
}

#left_out ul li:hover{
    background-color: #bababa;
    cursor: move;
}

.weekBox{
    float: left;
    width: 150px;
    border: 1px solid #bababa;
    height: 400px;
}

#right_out h2{
    width:100%;
    height: 40px;
    line-height: 40px;
    font-weight: 900;
    text-align: center;
    background: #cccccc;
}

js代碼以下（得引入jQuery包）：

//    給li元素添加拖拽相關的屬性
$("#left_out ul li").attr("draggable","true").attr("ondragstart","drag(event)").each( function (index,ele){
    $(this).attr("id",'li'+index);
});
//    給右邊目的地添加拖拽相關的屬性
$("#right_out .weekBox").attr("ondragover","allowDrop(event)").attr("ondrop","drop(event)");
//    給左邊目的地添加拖拽相關的屬性
$("#left_out ul").attr("ondragover","allowDrop(event)").attr("ondrop","dropRemove(event)");

//  下面都是原生js
function allowDrop(ev)
{
    ev.preventDefault();
    ev.stopPropagation();
}

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

}

//   enter右邊元素時高亮
function dragenter(ev){
//       需判斷，若是被拖拽元素來源於左邊才高亮
    var data=ev.dataTransfer.getData("Text");
    console.log(data)
    var drapNode=document.getElementById(data);
    console.log(drapNode)
    var drapNodeId=$(drapNode).attr("id") || "";
    console.log(drapNodeId)// getAttribute()這方法谷歌不兼容
    if(!(drapNodeId.indexOf("Right")==-1)){
        return false
    }
    $(ev.target).css({
        "color":"#FFFFFF",            //Object.style這方法火狐不兼容
        "backgroundColor":"red"
    });
}
//    leave右邊元素時恢復，不高亮
function dragleave(ev){
    $(ev.target).css({
        "color":"#000000",
        "backgroundColor":"#FFFFFF"
    });

}
var index=0;
function drop(ev)
{

//      克隆拖動的元素，若是拖動的元素來源於左邊，則添加到右邊或替換右邊的元素，若是不是，則return false。
    ev.preventDefault();
    ev.stopPropagation();
    var data=ev.dataTransfer.getData("Text");
    var drapNode=document.getElementById(data).cloneNode(true);
    var drapNodeId=drapNode.id;
    if(!(drapNodeId.indexOf("Right")==-1)){
        return false
    }

//      給準備拖放在右邊的元素添加能夠拖回左邊的屬性
    drapNode.setAttribute("id",drapNodeId+"Right"+index);
    index++;
    drapNode.setAttribute("ondragstart","dragRemove(event)")
    drapNode.style.cursor="move";
    drapNode.title="拖拽我回家"

    drapNode.style.border="1px solid #cccccc"
    drapNode.style.marginTop="2px"

    if(ev.target.id.indexOf("li")==-1){
        //添加
        ev.target.appendChild(drapNode);  //  在目標位置上添加
    }else{
        //替換
        ev.target.parentNode.insertBefore(drapNode,ev.target)
        ev.target.parentNode.removeChild(ev.target);
    }
    var rightList=document.getElementById("right_out").getElementsByTagName("li");
    for(var i=0;i<rightList.length;i++){
        rightList[i].setAttribute("ondragenter","dragenter(event)");
        rightList[i].setAttribute("ondragleave","dragleave(event)");
    }
}

//  這個函數用於實現將右邊的元素拖回左邊的功能，判斷拖動的元素是否來源於右邊，如果則刪除拖動的元素，不然返回false。
function dropRemove(ev)
{
    ev.preventDefault();
    ev.stopPropagation();
    var data=ev.dataTransfer.getData("Text");
    var drapNode=document.getElementById(data);
    var drapNodeId=drapNode.id;
    if(drapNodeId.indexOf("Right")==-1){
        return false
    }
    drapNode.parentNode.removeChild(drapNode);
}

效果圖以下：

效果爲：最左側的li元素能夠拖到右側的七個div中，還能夠進行替換而且高亮，右側七個div中的li元素能夠拖回最左側進行刪除。 感受js寫的有點亂，後面有時間再改吧。