起因
课程设计中需要用到浏览器中拖拽div
的功能,而我对如何实现还不太清楚,于是便去网上搜索了一段功能实现代码。
功能实现
感谢:实现div鼠标拖动效果
<!--
* @Author: ahy231
* @Date: 2020-11-29 14:03:47
* @LastEditors: ahy231
* @LastEditTime: 2020-11-29 22:51:04
-->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jquery实现div拖拽</title>
<script src="https://how2j.cn/study/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#moveBar {
position: absolute;
width: 200px;
height: 400px;
background: black;
color: yellowgreen;
border: solid 1px #000;
}
#banner {
background: #ddd;
cursor: move;
}
</style>
</head>
<body>
<!-- <div id="test">
<span id="first">first</span><br>
<span id="second">second</span>
</div> -->
<div id="moveBar">
<div id="banner">按住鼠标移动当前div</div>
<div id="content">内容部分</div>
</div>
<script>
$(function () {
dragPanelMove("#banner","#moveBar");
function dragPanelMove(downDiv,moveDiv){
$(downDiv).mousedown(function (e) {
var isMove = true;
// e指的是鼠标对象
var div_x = e.pageX - $(moveDiv).offset().left;
var div_y = e.pageY - $(moveDiv).offset().top;
// $("#first").text(div_x);
// $("#second").text(div_y);
$(document).mousemove(function (e) {
if (isMove) {
// var obj = $(moveDiv);
// obj.css({"left":e.pageX - div_x, "top":e.pageY - div_y});
$(moveDiv).css({"left":e.pageX - div_x, "top":e.pageY - div_y});
// $(moveDiv).css({"left":$(moveDiv).offset().left, "top":$(moveDiv).offset().top});
}
}).mouseup(
function () {
isMove = false;
});
});
}
});
</script>
</body>
我在原文的基础上,增加了一些注释,用来方便理解代码含义。
其中div_x
和div_y
分别表示鼠标点击moveDiv
时距离moveDiv
左上角的距离,用于下文中函数的计算。
$(moveDiv).css({"left":e.pageX - div_x, "top":e.pageY - div_y});
这句是功能实现的核心代码,通过JQuery
中设置css
的方法将moveDiv
位置设置为鼠标最终拖动的位置,从而达到鼠标拖动div
的效果。