1、 开启拖放
将将要拖放的对象元素的draggable属性设置为true,任何元素均可实现拖放,但img与a元算(必须制定href)默认允许拖放。
2、与拖放相关的事件
事件 | 产生事件的元素 | 描述 |
dragstart | 被拖放的元素 | 开始拖放操作 |
drag | 被拖放的元素 | 拖放过程中 |
dragenter | 拖放过程中鼠标经过的元素 | 被拖放的元素开始进入本元素的范围内 |
dragover | 拖放过程中鼠标经过的元素 | 被拖放的元素正在本元素的范围内移动 |
dragleave | 拖放过程中鼠标经过的元素 | 被拖放的元素离开本元素的范围 |
drop | 拖放的目标元素 | 有其他元素被拖放到本元素中 |
dragend | 拖放的对象元素 | 拖放操作结束 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script>
function init() {
const source = document.getElementById('dragme');
const dest = document.getElementById("text");
//拖动开始
source.addEventListener("dragstart", function (ev) {
//向dataTransfer对象添加数据
const dt = ev.dataTransfer;
dt.effectAllowed = "all";
//拖动元素为dt.setData("text/plain",this.id);
dt.setData("text/plain", "您好");
}, false);
//拖放结束
dest.addEventListener("dragend", function (ev) {
//不执行默认处理(拒绝被拖放)
ev.preventDefault();
}, false);
//drop:被拖放
dest.addEventListener("drop", function (ev) {
//从DataTransfer对象那里取得数据
const dt = ev.dataTransfer;
const text = dt.getData("text/plain");
dest.textContent += text;
//不执行默认处理(拒绝被拖放)
ev.preventDefault();
ev.stopPropagation();
}, false);
}
//设置页面属性,不执行默认处理(拒绝被拖放)
document.ondragover = function (e) {
e.preventDefault();
}
document.ondrop = function (e) {
e.preventDefault();
}
</script>
</head>
<body onload="init();">
<div id="dragme" draggable="true" style="width: 200px;border: 1px solid gray;">
请拖放
</div>
<div id="text" style="width: 200px;height: 200px;border: 1px solid gray;">
</div>
</body>
</html>
针对拖放的目标元素,必须在dragend或dragover事件内调用“事件对象.preventDefault()”方法。因为默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须关闭默认处理。
要实现拖放过程,还必须在目标元素的drop事件中关闭默认处理(拒绝被拖放),否则拖放处理也不能实现。因为页面实现与其他元素接受拖放的,如果页面上拒绝拖放,那么页面上其他元素就不能接受拖放了。
要实现拖放过程,还必须设定整个页面为不执行默认处理(拒绝被拖放),否则被拖放处理也不能实现。因为页面是先于其他元素接受拖放的,如果页面上拒绝拖放,那么页面上其他元素不能接受拖放了。
为了让拖放在所有支持拖放API的浏览器中都能正常运行,需要制定"-webkit-user-drag:element"这种Webkit特有的CSS属性。
3、MIME类型
·text/plain:文本文字
·text/html:HTML文字
·text/xml:XML文字
·text/uri-list:URL列表,每个URL为一行
4、js的dataTransfer对象
提供对于预定义的剪贴板格式的访问,以便在拖拽中使用。
属性 | 描述 | 参数 |
dropEffect | 设置或返回拖放目标上允许发生的拖放行为和要显示的光标类型 |
copy 复制样式被显示
link 链接样式被显示
move 移动样式被显示
none 默认,没有鼠标样式被定义
|
effectAllowed | 设置或返回被拖动元素允许发生的拖动行为与该对象的源元素。 |
copy 选项被复制
link 选项被dataTransfer作为link方式保存
move 当放置时,对象被移动至目标对象
copylink 选项是被复制还是被作为link方式保存关键在于目标对象
linkmove 选项是被作为link方式保存还是被移动关键在于目标对象
all 所有效果都被支持
none 不支持任何效果
uninitialized 默认不能通过这个属性传递任何值
|
types | 存入数据的种类,字符串的伪数组 | |
clearData() | 清除DataTransfer对象中存放的数据,如果省略参数format,则清楚全部数据 | |
setData(format,data) | 将指定格式的数据赋值给dataTransfer对象 | 参数format定义数据的格式也就是数据的类型,data为待赋值的数据 |
getData(format,data) |
从dataTransfer对象中获取指定格式的数据 | format代表数据格式,data为数据。 |
setDragImage(Element image,long x,long y) | 用img元素来设置拖放图标(部分浏览器中可以用canvas等其他元素来设置) | element设置自定义图标,x设置图标与鼠标在水平方向上的距离,y设置图标与鼠标在垂直方向上的距离。 |
effectAllowed定义了在源对象上的操作,可定义在ondragstart事件中。
dropEffect定义了在目标对象上的操作,可定义在ondrop,ondragenter,ondragover事件中。
effectAllowed可以定义all操作,但是dropEffect可以定义copy操作。
5、设定拖放时的视觉效果
DataTransfer对象的dropEffect属性表示实际拖放时的视觉效果,一般在ondragover事件中指定,允许设定的值为none、link、move。dropEffect属性所表示的实际视觉效果必须与effectAllowed属性值所表示的允许操作相匹配,规则如下所示:
- 如果effectAllowed属性设定为none,则不允许拖放元素。
- 如果dropEffect属性设定为none,则不允许拖放元素。
- 如果effectAllowed属性设定为all或不设定,则dropEffect属性允许被设定为任何值。
- 如果effectAllowed属性设定为具体操作,而dropEffect属性也设定了具体视觉效果,则dropEffect属性值必须与effectAllowed属性值相匹配,否则不允许将被拖放元素拖放到目标元素中。
6、自定义拖放图标
setDragImage(Element image,long x,long y),第一个参数image是设定拖放图标的图标元素,第二个参数x为拖放图标离鼠标指针的X轴方向的唯一量,第三个参数y为拖放图标离鼠标指针的y轴方向的位移量。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function init(){
var dragIcon = document.createElement("img");
dragIcon.src ='https://www.baidu.com/img/bdlogo.png';
var source = document.getElementById('dragme');
var dest = document.getElementById("text");
source.addEventListener('dragstart',function(ev){
var dt = ev.dataTransfer;
dt.setDragImage(dragIcon,-10,-10);
dt.effectAllowed = "copy";
dt.setData("text/plain","您好");
},false);
dest.addEventListener('dragend',function(ev){
ev.preventDefault();
},false);
dest.addEventListener('dragover',function(){
var dt = ev.dataTransfer;
dt.dropEffect = "copy";
ev.preventDefault();
},false);
dest.addEventListener('drop',function(ev){
var dt = ev.dataTransfer;
var text = dt.getData("text/plain");
dest.textContent +=text;
ev.preventDefault();
ev.stopPropagation();
},false);
}
document.ondragover = function(e){
e.preventDefault();
};
document.ondrop = function(e){
e.preventDefault();
}
</script>
</head>
<body onload="init();">
<div id="dragme" draggable="true" style="width: 200px;border: 1px solid gray;">
请拖放
</div>
<div id="text" style="width: 200px;height: 200px;border: 1px solid gray;">
</div>
</body>
</html>