Html5-draggable元素拖動

Html5元素拖動

在 HTML5 中，拖放是標准的一部分，任何元素都能夠拖放。
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖動。
注意:Safari 5.1.2不支持拖動.

第一步：將需要拖動的元素Html標簽設置為draggable="true"

<img id="dragImg" draggable="true" src="img/test1.png" width="200" height="111" />

第二步：定義拖動函數

        //拖動開始
        function dragStar(ev) {
            //獲取拖動元素值得類型與id
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        //拖動中
        function draging(ev) {
            //去除瀏覽器對數據的默認處理
            ev.preventDefault();
        }

        //拖動結束（放置）
        function dragEnd(ev) {
            //去除瀏覽器對數據的默認處理
            ev.preventDefault();
            //獲取被拖動（需要放置）的元素的id
            var data = ev.dataTransfer.getData("Text");
            //將data放置到容器中
            ev.target.appendChild(document.getElementById(data));
        }

第三步，為Html中需要拖動的元素，和拖動后放置的容器的 拖動事件綁定拖動上述定義函數

  <div id="div1" ondrop="dragEnd(event)" ondragover="draging(event)">
        <img id="dragImg" draggable="true" ondragstart="dragStar(event)" src="img/test1.png" width="200" height="111" />
    </div>
    <div id="div2" ondrop="dragEnd(event)" ondragover="draging(event)"></div>

ok，功能實現；

測試全代碼：

css

#div1,#div2{ float:left; margin-right:10px; width:300px; height:120px; line-height:120px; text-align:center; border:1px solid #808080;  }
img{ vertical-align:middle; }

Html

<div id="div1" ondrop="dragEnd(event)" ondragover="draging(event)">
        <img id="dragImg" draggable="true" ondragstart="dragStar(event)" src="img/test1.png" width="200" height="111" />
    </div>
    <div id="div2" ondrop="dragEnd(event)" ondragover="draging(event)"></div>

JavaScript

       //拖動開始
        function dragStar(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

        //拖動中
        function draging(ev) {
            ev.preventDefault();
        }

        //拖動結束（放置）
        function dragEnd(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }

小知識：

在拖動目標上觸發事件 (源元素):

ondragstart - 用戶開始拖動元素時觸發
ondrag - 元素正在拖動時觸發
ondragend - 用戶完成元素拖動后觸發

釋放目標時觸發的事件:

ondragenter - 當被鼠標拖動的對象進入其容器范圍內時觸發此事件
ondragover - 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件
ondragleave - 當被鼠標拖動的對象離開其容器范圍內時觸發此事件
ondrop - 在一個拖動過程中，釋放鼠標鍵時觸發此事件