实现这个效果的关键是给div的定位设置成absolute,然后获得鼠标移动后的位置坐标并给要移动的div。
我将它封装成了一个函数，只需要传入参数即可使用。
downDiv:鼠标按下部分的id；
moveDiv:跟随鼠标移动的div的id;
代码如下：
<!DOCTYPE html><html lang="zh"><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>
$(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>本文链接：https://blog.csdn.net/hry1243916844/article/details/77718186
