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>