说明:
在进行拖放操作时,dataTransfer
对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。dataTransfer对象有两个主要的方法:getData()方法和setData()方法。
setData("Text",ev.target.id):用指定的数据格式把数据插入 DataObject 对象。
语法 object.SetData [data],[format]
getData()方法可以取得由setData()方法保存的值。setData()方法的第一个参数,也是getData()方法唯一的一个参数,是用来保存数据类型的字符串,取值是”text”或”URL”。
实现步骤:
1、对要拖动的对象定义draggable="ture"
2、在要拖动的对象上定义ondragstart="drag(event)"
3、在目标对象上定义ondragover="allowdrag(event)"和ondrop="drop(event)"
拖拽相关方法:
ondragstart 拖拽前触发
ondragend 拖拽结束触发
ondragenter 相当于onmouseover
ondragleave 相当于onmouseout
ondragover 进入目标、离开目标之间,连续触发
ondrop 释放鼠标的时候触发
preventDefault() 阻止默认事件