实现元素拖放的两种方式:
- 传统方式:通过监听鼠标事件,获取元素移动的位置,计算并赋值到目标位置上(依赖position的定位样式);
- HTML5方式:HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素,必须设置该元素的
draggable
属性为 true
一、传统方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.dialog{
position: absolute;
left: 100px;
top:200px;
width:200px;
height: 300px;
}
.title{
width: 100%;
height: 15%;
background-color: lightseagreen;
text-align: center
}
.itbody{
width: 100%;
height: 90%;
background-color: lightgoldenrodyellow
}
</style>
</head>
<body>
<div class="dialog">
<div class="title">title</div>
<div class="itbody"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var isMouseDown = false;
var lastP