拖放api示例

来源：互联网发布：网络安全保卫支队编辑：程序博客网时间：2024/06/07 04:11
<!DOCTYPE html>
<htmllang="en">

<head>
<title>拖放api</title>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1">
<scriptsrc="js/jquery.js"></script>
<style>
#dragme {
width:200px;
border:1px solid gray;
height:100px;
}
#text {
width:200px;
height:200px;
border:1px solid gray;
margin-top:10px;
}
img {
display:block;
width:50px;
height:50px;
border:1px solid black;
}
</style>
</head>

<bodyonload="init()">
<p>拖放api示例</p>
<divid="dragme"draggable="true">请拖放</div>
<divid="text"></div>
<script>
functioninit() {
var source= document.getElementById("dragme");
var dest= document.getElementById("text");
// 自定义拖放图标
var dragIcon= document.createElement('img');
dragIcon.src= 'image/assistant-loading.jpg';
// 拖放开始
source.addEventListener("dragstart",function(ev) {
//向dataTransfer追加数据
// dataTranfer对象专门用来存放拖放是要携带的数据
// console.log(ev.dataTransfer);
var dt= ev.dataTransfer;
// effectAllowed 用来指定当元素被拖放式所允许的视觉效果
dt.effectAllowed= 'all';
dt.setDragImage(dragIcon,-30,-30);
dt.setData("text/plain","你好");
// dt.clearData();
//setDragImage();用img元素来设置拖放的图标

}, false);
// 拖放结束
dest.addEventListener("dragend",function(ev) {
//不执行默认处理，拒绝拖放
ev.preventDefault();
}, false);
// 被拖放，drop
//实现拖放，目标元素的drop事件中关闭默认处理拒绝被拖放，
// 否则目标元素不能接受被拖放的元素
dest.addEventListener("drop",function(ev) {
//从DataTranfer那里取得数据
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>
</body>

</html>
阅读全文
0 0