JQ 拖拽demo参考
参考地址：http://www.jq22.com/webqd1345
html
<!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>打印demo</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 数据模块 -->
<div class="left">
<div class="modules">
<span>基本信息</span>
<div id="add_001">
<div>姓名：<span>小明</span></div>
</div>
<div id="add_002">
<div>性别：<span>男</span></div>
</div>
<div id="add_003">
<div>电话：<span>17342052454</span></div>
</div>
<div id="add_004">
<div>地址：<span>成都市 锦江区</span></div>
</div>
</div>
</div>
<!-- 打印界面 -->
<div class="right" style="background: white">
<div class="table_center" style="background: yellow">
<!-- <div id="ceshi"></div> -->
</div>
</div>
<!-- js -->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>JS
$(document).ready(function () {
/**
* --------------------------------------------------------------
* 逻辑区
* --------------------------------------------------------------
*/
// 预变量
let idN = 0; // 元素递增变量
// 添加点击元素
$('.modules > div').click(function () {
let clickId = $(this).attr("id"); // 获取点击的ID值
let addData = $(this).html()
addElementDrag() // 添加元素拖拽
addElement(addData, clickId) // 添加元素
printDrag('.table_center > div', '.table_center') // 打印拖拽
})
/**
* --------------------------------------------------------------
* 函数区
* --------------------------------------------------------------
*/
// 添加打印元素
function addElement(val, idV) {
idN = ++idN
let addString = val.trim().replace(/<div>/, '<div id="' + idV + idN + '">') // 匹配首个'<div>'字符
$('.table_center').append(addString)
}
// 元素添加拖拽
function addElementDrag() {
$('#add_001').mousedown(function (e) {
let positionDiv = $(this).offset(); // 元素相对于文档的偏移
let distenceX = e.pageX - positionDiv.left; // 中间值
let distenceY = e.pageY - positionDiv.top; // 同上
console.log(e.pageX)
console.log(e.pageY)
})
}
// 打印拖拽函数
function printDrag(getDrEle, printReg) {
$(getDrEle).mousemove(function () {
let that = this
$('#' + that.id).mousedown(function (e) { // 打印界面拖拽效果
let distenceX = e.pageX - $('#' + that.id).offset().left; // 鼠标坐标减去元素当前坐标值（中间值）
let distenceY = e.pageY - $('#' + that.id).offset().top; // 同上
$(printReg).mousemove(function (e) {
let tableCenterP = $(printReg).offset(); // table_center当前坐标
let x = e.pageX - distenceX - tableCenterP.left; // 当前鼠标位置减去中间值
let y = e.pageY - distenceY; // 移动元素的纵坐标
if (x < 0) { // 防止划出打印界面左右
x = 0;
} else if (x > $(printReg).width() - $('#' + that.id).outerWidth(true)) { // outerWidth(true) 表示a+padding+border+margin
x = $(printReg).width() - $('#' + that.id).outerWidth(true);
}
if (y < 0) { // 防止划出打印界面上下
y = 0;
} else if (y > $(printReg).height() - $('#' + that.id).outerHeight(true)) { // 同上
y = $(printReg).height() - $('#' + that.id).outerHeight(true);
}
$('#' + that.id).css({ // 修改div位置
'left': x + 'px',
'top': y + 'px'
});
})
})
$(document).mouseup(function () { // 清除鼠标移动事件
$(getDrEle).off('mousemove');
$(printReg).off('mousemove');
});
})
}
})css
body {
display: flex;
}
.left {
background: rgb(178, 165, 236);
width: 270px;
height: 100vh;
display: flex;
}
.right {
background: rgb(155, 201, 238);
flex: 1;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.table_center {
width: 900px;
height: 100vh;
background: white;
position: relative;
}
.modules > span {
position: relative;
display: block;
padding: 20px 15px 15px;
}
/* .modules > span::after {
content: "";
position: absolute;
top: 45px;
left: 0;
background: #494949;
width: 280px;
height: 2px;
} */
.modules > div {
background: #fff;
border: 1px solid #ccc;
padding: 10px 25px 10px 25px;
margin: 10px;
color: #333;
border-radius: 4px;
-webkit-user-select: none; /* 不被选中 */
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* 测试div */
#ceshi{
width: 100px;
height: 100px;
background: #f00;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
}
.table_center div{
position: absolute;
left: 0;
top: 0;
cursor: pointer;
-webkit-user-select: none; /* 不被选中 */
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
