请问老师所谓的拖拽如何实现呢
来源：2-9 鼠标事件-mousemove
光aaaaand影
2019-02-21 17:09:52
如何实现拖拽
1回答
-
Steve007
2019-02-21
同学，你好。实现这个效果的关键是给div的定位设置成absolute,然后获得鼠标移动后的位置坐标并给要移动的div。 我将它封装成了一个函数，只需要传入参数即可使用。 downDiv:鼠标按下部分的id； moveDiv:跟随鼠标移动的div的id; 代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jquery实现div拖拽</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
#moveBar {
position: absolute;
width: 200px;
height: 400px;
background: black;、
color：white;
border: solid 1px #000;
}
#banner {
background: #ddd;
cursor: move;
}
</style>
</head>
<body>
<div id="moveBar">
<div id="banner">按住鼠标移动当前div</div>
<div id="content">内容部分</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(function () {
dragPanelMove("#banner","#moveBar");
function dragPanelMove(downDiv,moveDiv){
$(downDiv).mousedown(function (e) {
var isMove = true;
var div_x = e.pageX - $(moveDiv).offset().left;
var div_y = e.pageY - $(moveDiv).offset().top;
$(document).mousemove(function (e) {
if (isMove) {
var obj = $(moveDiv);
obj.css({"left":e.pageX - div_x, "top":e.pageY - div_y});
}
}).mouseup(
function () {
isMove = false;
});
});
}
});
</script>
</body>
</html>
祝学习愉快！
0
相似问题