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>