在这里插入代码片
<div id="ele" style="width:500px;height: 150px;border: 1px solid red" draggable="true">
请拖放我
</div>
<div id="targetele" style="width:500px;height: 300px;border: 1px solid silver"></div>
</body>
<script>
var ele=document.getElementById("ele");
var targetele=document.getElementById("targetele");
**/*1.先设置draggable="true"是元素允许拖动
* tragstart:刚开始拖动
* trag:正在拖动
* tragenter:拖动元素进入本元素的范围内;
* tragover:拖动元素在本元素范围内移动;
* tragleave:拖动元素离开本元素范围;
* drop:有其他元素被放到本元素
* tragend:拖动结束;
* */**
ele.addEventListener("dragstart",function(e){
var data=e.dataTransfer;//
/*开始拖动把要拖动的数据存入dataTransfer对象;
* 属性:dropEffect
* 属性:effectAllowed 当元素被拖动时允许的视觉效果;
* clearData() 清除数据;
* setData(类型,数据) text/plain text/html text/xml text/url-list
* getData(类型)
* setDragImage(image,x,y)自定义拖放图标 拖放图标里离鼠标x方向的距离
* */
data.effectAllowed="all";
data.setData("text/html","你好");
},false);
targetele.addEventListener("dragend",function(e){
e.preventDefault();//元素默认不接受拖动元素
},false);
targetele.addEventListener("drop",function(e){
console.log(e)
var data=e.dataTransfer;
console.log(data);
var m=data.getData("text/html");
console.log(m);
targetele.textContent+=m;
e.preventDefault();
e.stopPropagation();
},false);
document.ondragover=function(e){
e.preventDefault()//网页不接受拖动元素
};
document.ondrop=function(e){
e.preventDefault()
html5拖放API
最新推荐文章于 2022-02-16 11:22:14 发布