版权声明:欢迎评论、补充;24小时内回复;及时更新;欢迎转载。 https://blog.csdn.net/li905663280/article/details/84888520
js移出和移入
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge" >
<meta name="renderer" content="webkit" >
<title>index</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
.container {
width: 200px;
height: 100px;
margin-top: 20px;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
$(function () {
//开始
$('#drag1').on('dragstart', function (e) {
e.originalEvent.dataTransfer.setData('text',e.target.id);
});
//进入目标元素
$('.container').on('dragenter', function (e) {
e.preventDefault();
});
//在目标元素上移动
$('.container').on('dragover', function (e) {
e.preventDefault();
});
//移出目标元素
$('.container').on('dragleave', function () {
});
//被拖拽元素被放置在目标元素上
$('.container').on('drop', function (ev) {
//阻止默认行为
ev.preventDefault();
//阻止默认行为
ev.stopPropagation();
var data=ev.originalEvent.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
});
//拖拽结束
$('drag1').on('dragend', function (ev) {
});
})
</script>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中:</p>
<div class="container" >
</div>
<div class="container" style="margin-top: 50px">
<img id="drag1" src=" http://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
</div>
</body>
</html>