第一种 使用JQuery和JQuery-UI组件
JQuery-UI：https://www.runoob.com/jqueryui/example-draggable.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id="draggable">
<p>请拖动我！</p>
</div>
</body>
</html>
第二种 使用JavaScript和样式实现 拖动功能的实现
$(function(){
dragPanelMove(".titleMain","#left_bottom_div_tips_win");
});
function dragPanelMove(titleDiv, mainWinDiv) {
$(titleDiv).mousedown(function (e) {
var isMove = true;
var div_x = e.pageX - $(mainWinDiv).offset().left;
var div_y = e.pageY - $(mainWinDiv).offset().top;
$(document).mousemove(function (e) {
if (isMove) {
var obj = $(mainWinDiv);
obj.css({"left": e.pageX - div_x, "top": e.pageY - div_y});
}
}).mouseup(
function () {
isMove = false;
});
});
}
div样式
<div id="left_bottom_div_tips_win" style="width: 200px;height: 200px;box-shadow: 1px 1px 5px 2px #999;
background: #fff;position: absolute;bottom: 1%;right: 1%;">
<div style="height: 20px;background: #f2f2f2;cursor: move;">
<span style="font-size: 14px;vertical-align: middle;"></span>
<div id="closeDivWin" style="position: absolute;text-align: center;width: 18px;height: 18px;
box-shadow: 0px 0px 0px 1px #d9d9d9;right: 1px;cursor: pointer"
onclick="$('#left_bottom_div_tips_win').fadeOut(500);"
onmouseover="$(this).css('background','red');"
onmouseout="$(this).css('background','')">X
</div>
</div>
<div style="position: relative;left: 30px;top: 10px;display: flex;align-items: center;">
<img src="" style="width: 30px;height: 30px;box-shadow: 1px 1px 3px 1px #999;border-radius: 100%;">
<span style="padding-left: 10px;font-size: 25px;">ML</span>
</div>
<div style="margin: 15px 0px 0px 10px;">
<div style="font-size: 12px;color: #999;">2022-05-25 11:06</div>
<div style="padding: 5px 2px;font-size: 13px;max-height: 70px;
max-width: 165px;overflow: hidden; text-overflow: ellipsis;
line-height: 1;color: blue;">
消息内容通知
</div>
</div>
</div>