实现拖拽

最新推荐文章于 2023-10-17 19:40:46 发布

久光

最新推荐文章于 2023-10-17 19:40:46 发布

阅读量327

点赞数

本文链接：https://blog.csdn.net/Charlene_lx/article/details/90046122

版权

draggable="true"属性设置为true,即可以拖拽.

通过在拖动dom上设置οndragstart="drag(event)"属性方法,在方法中进行ev.dataTransfer.setData(“Text”,ev.target.id);储存.
在释放目标上设置οndrοp=“drop(event)” 属性方法,通过dataTransfer.getData("Text")进行获取到拖动dom.再进行ev.target.appendChild(document.getElementById(data));添加进去
在释放目标上设置οndragοver=allowDrop(event) ,方法中设置event.preventDefault(),阻止关联动作,实现拖拽.

dataTransfer对象可以用来保存被拖动的数据
event.dataTransfer.setData
event.dataTransfer.getData

ondragstart用户开始拖动元素时触发
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover拖动到放置目标范围内拖动时候触发
ondrop 在一个拖动过程中,释放鼠标键时触发此事件。
ondragend- 用户完成元素拖动后触发

 function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>请把 W3School 的图片拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

久光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现拖拽

draggable="true"属性设置为true,即可以拖拽.通过在拖动dom上设置οndragstart="drag(event)"属性方法,在方法中进行ev.dataTransfer.setData(“Text”,ev.target.id);储存.在释放目标上设置οndrοp=“drop(event)” 属性方法,通过dataTransfer.getData("Text")进行获...
复制链接

扫一扫