Jquery实现div拖拽

ゞ浴缸里的玫瑰 2022-06-08 06:05 177阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <title> New Document </title>
      <script type="text/javascript" src="E:/jquery-1.7.2.min.js"></script>
      <style type="text/css">
    /*模块拖拽*/
    .drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:100px;left:20px;cursor:move;}
    </style>
    
    <script type="text/javascript">
    // 模块拖拽
    $(function(){
    var _move=false;//移动标记
    var _x,_y;//鼠标离控件左上角的相对位置
        $(".drag").click(function(){
            //alert("click");//点击（松开后触发）
            }).mousedown(function(e){
            _move=true;
            _x=e.pageX-parseInt($(".drag").css("left"));
            _y=e.pageY-parseInt($(".drag").css("top"));
            $(".drag").fadeTo(20, 0.5);//点击后开始拖动并透明显示
        });
        $(document).mousemove(function(e){
            if(_move){
                var x=e.pageX-_x;//移动时根据鼠标位置计算控件左上角的绝对位置
                var y=e.pageY-_y;
                $(".drag").css({top:y,left:x});//控件新位置
            }
        }).mouseup(function(){
        _move=false;
        $(".drag").fadeTo("fast", 1);//松开鼠标后停止移动并恢复成不透明
      });
    });
    </script>
    </head>
    <body>
     <div class="drag">这个可以拖动哦 ^_^</div>
    </body>
    
    </html>

$("\#question\_pic").bind("click",function(event)\{  
         event.stopPropagation();  //防止冒泡事件响应  
         $("\#chat\_question").hide("slow");

\});

$("\#chatLineHolder").scrollTop(10000);//保持最下一行，不用滚

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关基于jquery的div拖拽功能

展示效果如图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

一时失言乱红尘/ 2022年11月30日 00:21/ 0 赞/ 106 阅读

相关用js拖拽div

描述：拖拽div元素，主要用到以下三个事件 onmousedown onmousemove onmouseup 当拖拽网页中的内容时，浏览器会默认搜索引擎

ゝ一纸荒年。/ 2022年11月29日 14:30/ 0 赞/ 230 阅读

相关 jQuery拖拽div层和图片插件

[下载地址][Link 1]一款不错的jQuery拖拽插件，用这个插件可以在网页上任意拖拽元素，比如div层或者图片，更不错的是，我们可以控制其拖拽的方向，比如只允许水平拖拽和

超、凢脫俗/ 2022年09月10日 14:21/ 0 赞/ 140 阅读

相关使用jQuery实现div可拖拽功能

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

﹏ヽ暗。殇╰゛Y/ 2022年08月06日 12:16/ 0 赞/ 246 阅读

相关 Jquery实现div拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

ゞ浴缸里的玫瑰/ 2022年06月08日 06:05/ 0 赞/ 178 阅读

相关原生JavaScript实现div拖拽效果

实现思路：（1）首先改变被拖动元素的布局属性为“position：absolute”，其父框为“position：relative”；（2）捕捉鼠标事件“mo

分手后的思念是犯贱/ 2022年05月24日 03:43/ 0 赞/ 282 阅读

相关 js拖拽div移动

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必

拼搏现实的明天。/ 2022年05月13日 00:08/ 0 赞/ 234 阅读

相关 jQuery 拖拽

<!DOCTYPE html> <html><head> <meta charset="utf-8" /> <title>jQu

心已赠人/ 2022年04月14日 20:12/ 0 赞/ 248 阅读

相关 jQuery实现面板拖拽

一.实现功能 1.首先页面有一个面板或者对话框，有长和宽，可以设置为一个div。 2.当把鼠标over到div的某个位置时，鼠标的箭头图片变为一个拖拽的图片。 3.接

矫情吗；*/ 2022年01月31日 07:11/ 0 赞/ 261 阅读

相关 js拖拽div例子

1.demo.html \-------------------------------- <!doctype html> <!--\[if IE 7 \]>

客官°小女子只卖身不卖艺/ 2021年11月01日 03:34/ 0 赞/ 306 阅读