JS实现DIV的拖动

.陌路

已于 2022-10-09 20:06:37 修改

阅读量1.2k

点赞数 1

分类专栏： web前端基础文章标签： javascript 前端 css3 jquery html5

于 2022-05-26 15:06:16 首次发布

本文链接：https://blog.csdn.net/qq_51076413/article/details/124984930

版权

基础同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

web前端

18 篇文章 0 订阅

订阅专栏

JS实现DIV的拖动

第一种

使用JQuery和JQuery-UI组件

JQuery-UI：https://www.runoob.com/jqueryui/example-draggable.html

<!doctype html>
<html lang="en">
<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" class="ui-widget-content">
		  <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 class="titleMain" 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 class="online-msg" style="margin: 15px 0px 0px 10px;">
        <div class="online-time" style="font-size: 12px;color: #999;">2022-05-25 11:06</div>
        <div class="online-content" 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>