HTML +JS +JQuery 实现DIV的拖动效果

最新推荐文章于 2024-06-05 10:04:13 发布

程序媛~婷

最新推荐文章于 2024-06-05 10:04:13 发布

阅读量3.4k

点赞数

分类专栏： JS 文章标签： DIV可拖动效果 twaver面板上自定义浮框

本文链接：https://blog.csdn.net/litingyuki/article/details/80341365

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近项目需要在twaver拓扑图面板上，单击link时弹出一个浮框，以展示该通道的详细信息，因信息量大，故自定义了一个class为dialog的div。想要实现该框的鼠标拖动效果，代码如下：（只展示了js部分）

//实现可拖动效果 start
$("#dialogHeader").mouseenter(function(e) {
    var obj = $('div.dialog');
    obj.css({
       'left': $('.dialog').offset().left ,
       'top': $('.dialog').offset().top
    });
});
$("#dialogHeader").mouseout(function() {
    var obj = $('div.dialog');
    //还原样式，并获取
    obj.css({
      'left': $('div.dialog').offset().left,
      'top': $('div.dialog').offset().top
    });
});

$('#dialogHeader').mousedown(
  function(event) {
     var isMove = true;
     var abs_x;
     var abs_y;
     abs_x = event.pageX - $('div.dialog').offset().left;
     abs_y= event.pageY - $('div.dialog').offset().top;
$(document).mousemove(function(event) {
       if(isMove) {
          var obj = $('.dialog');
	  obj.css({
	     'left': event.pageX - abs_x,
	     'top': event.pageY - abs_y
			                        
	  });
 $('#dialogHeader').css({'cursor':'move'}); 
 $('#titleTxt').css({'cursor':'text'});        
  }}).mouseup(
	function() {
	  isMove = false;
        }
   );
 });
				
//实现可拖动效果 end

下面是参考的一个demo 的完整代码，需要注意的是，Demo中margin不为零，故有margin的div可以参考。

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Qing's Web</title>
        <script src="js/jquery-1.11.0.js" type="text/javascript"></script>
        <style type="text/css">
            
            .moveBar {
                position: absolute;
                width: 250px;
                height: 300px;
                background: #666;
                border: solid 1px #000;
                margin: 50px;
                left:200px;
                top:200px;
            }
            
            #banner {
                background: #52CCCC;
                cursor: move;
            }
        </style>
    </head>

    <body >

        <div class="moveBar">
            <div id="banner">按住此处移动当前div</div>
            <div class="content">这里是其它内容</div>
        </div>
        
        <script>
            jQuery(document).ready(
                function() {
                    $('#banner').mousedown(
                        function(event) {
                            
                            $(".moveBar").css("margin","0px")
                            
                            var isMove = true;
                            var abs_x = event.pageX - ($('div.moveBar').offset().left+50);
                            var abs_y = event.pageY - ($('div.moveBar').offset().top+50);
                            $(document).mousemove(function(event) {
                                if(isMove) {
                                    var obj = $('.moveBar');
                                    obj.css({
                                        'left': event.pageX - abs_x,
                                        'top': event.pageY - abs_y
                                    });
                                }
                            }).mouseup(
                                function() {
                                    var obj = $('.moveBar');
                                    //还原样式，并获取
                                    obj.css({
                                        'left': $('div.moveBar').offset().left-50,
                                        'top': $('div.moveBar').offset().top-50
                                    });
                                    $(".moveBar").css("margin-left","50px")
                                    $(".moveBar").css("margin-top","50px")
                                    
                                    isMove = false;
                                }
                            );
                        }
                    );
                }
            );
        </script>
    </body>

</html>

程序媛~婷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML +JS +JQuery 实现DIV的拖动效果

最近项目需要在twaver拓扑图面板上，单击link时弹出一个浮框，以展示该通道的详细信息，因信息量大，故自定义了一个id为dialog的div。想要实现该框的鼠标拖动效果，代码如下：（只展示了js部分）//实现可拖动效果 start$("#dialogHeader").mouseenter(function(e) { var obj = $('div.dialog'); obj...
复制链接

扫一扫