CSS3學習二：HTML5新增拖動事件

一、拖放事件：

相當於以前實現過一div拖放效果。

dragstart：開始拖動時觸發。

屬性	值	描述
ondrag	script	當拖動元素時運行腳本
ondragend	script	當拖動操作結束時運行腳本
ondragenter	script	當元素被拖動至有效的拖放目標時運行腳本
ondragleave	script	當元素離開有效拖放目標時運行腳本
ondragover	script	當元素被拖動至有效拖放目標上方時運行腳本
ondragstart	script	當拖動操作開始時運行腳本
ondrop	script	當被拖動元素正在被拖放時運行腳本

 

 

 

 

 

 

 

 

 

示例：

實現拖放的步驟 ：

1.將想要拖放的對象元素的draggable屬性設置為true。這樣才可以將元素進行拖放。

2.拖動什么：ondrgstart和setData()

3.放到何處：ondragover

4.進行放置：ondrop和getData()

        <div id="box1" style="border: 1px solid black;width: 500px;height: 400px;">
            <!-- draggable屬性：是否可拖放 -->
            <img src="img/timg.jpg" id="img1" style="width: 400px;height: 350px;" draggable="true"/>
        </div>
        <div id="box2" style="border: 1px solid black;width: 500px;height: 400px;"></div>
        <script type="text/javascript">
            window.onload = function(){
                var box1 = document.getElementById("box1")
                var box2 = document.getElementById("box2")
                var img = document.getElementById("img1")
                // 拖動img標簽
                img.ondragstart = function(e) {
                    console.log("*********1")
                    // 獲取拖放div的內容
                    var data = e.dataTransfer
                    data.setData("text/plain", this.id)
                }
                // 設置box2：可以放置img標簽
                box2.ondragover = function(e) {
                    console.log("*********2")
                    e.preventDefault()
                }
                // 松手時的事件
                box2.ondrop = function(e){
                    console.log("*********3")
                    var data = e.dataTransfer
                    var text = data.getData("text/plain")
                    // 插入當前標簽box
                    e.target.appendChild(document.getElementById(text))
                }
                //設置可以回拖動box1
                box1.ondragover = function(e) {
                    e.preventDefault()
                }
                box1.ondrop = function(e){
                    var data = e.dataTransfer
                    var text = data.getData("text/plain")
                    e.target.appendChild(document.getElementById(text))
                }
            }
        </script>