jquery实战——弹出框拖拽效果

摘要:
如果未指定参数,unbind()方法将删除指定元素的所有事件处理程序。)//除unbind()外,。off()还可以用于删除事件的更高版本的jquery库与更低版本的jquery库之间的不兼容性});})//步骤3:移动窗口的步骤:按下鼠标左键-移动鼠标ViewCode

今天主要记录一下弹出框拖拽效果:

一、移动弹出窗口的步骤是:按下鼠标左键——移动鼠标——松开鼠标左键停止移动

二、主要思想:

按下鼠标左键:$('div').mousedown(function(e){})

移动鼠标,获取鼠标当前坐标值:$(document).mousemove(function(e){})

松开鼠标左键停止移动:$('div').mouseup(function(e){

$(document).unbind('mousemove');  //即当鼠标左键被释放时解除mousemove事件

})

jquery实战——弹出框拖拽效果第1张

需要注意的是,鼠标按下的时候相对于div左上角的位置是不变的,所以在移动的时候,div的left和top值要做相应的处理(具体参见代码说明)

三、最后,div在移动的过程中要防止它移动出可视窗口,因此应做以下处理:

禁止从左边移出:

if(x<0){

x=0;

}

禁止从右边移出:

if(x>$(document).width()-$('div').outerWidth(true))

{

x=$(document).width()-$('div').outerWidth(true);

}

禁止从顶部移出:

if(y<0){

y=0;

}

禁止从底部移出:

if(y>$(document).height()-$('div').outerHeight(true)){

y=$(document).height()-$('div').outerHeight(true);

}

详细代码参加以下:

jquery实战——弹出框拖拽效果第2张jquery实战——弹出框拖拽效果第3张
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery拖拽功能</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css">
*{ margin:0; padding:0;}
div{ width:100px; height:100px; background:#F00; cursor:move; left:0; top:0; position:absolute;}
</style>
</head>

<body>
<!--
拖拽功能
拖拽即为改变left值和top值
移动窗口的步骤:按下鼠标左键——移动鼠标——松开鼠标停止移动
-->
<div></div>
</body>
<script type="text/javascript">
$(function(){
    //首先获取鼠标位置 x坐标:e.pageX和y坐标:e.pageY
    $('div').mousedown(function(e){
    //拖动时鼠标相对于div左上角的left值和top值是不变的
    //要求黑色线段,则用:绿色线段-红色线段
    var positionDiv = $(this).offset();
    var distenceX = e.pageX - positionDiv.left;
    var distenceY = e.pageY - positionDiv.top;
    
      $(document).mousemove(function(e){
          var x=e.pageX-distenceX;
          var y=e.pageY-distenceY;
          //使div在可视窗口内拖动
          if(x<0){ //防止左边移出可视窗口
            x=0;  
           }else if(x>$(document).width()-$('div').outerWidth(true)){ //防止右边移出可视窗口
              x=$(document).width()-$('div').outerWidth(true);
           }
           if(y<0) //防止顶部移出可视窗口
           {
             y=0;
           }else if(y>$(document).height()-$('div').outerHeight(true)){ //防止底部移出可视窗口
             y=$(document).height()-$('div').outerHeight(true);
           }
          //step2:将x坐标和y坐标赋值给div 
          $('div').css({
            'left':x+'px',
            'top':y+'px'    
          });    
      });
    });
    $('div').mouseup(function(){//当鼠标左键被释放时
          $(document).unbind('mousemove');//解除mousemove事件(unbind规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。)
        //除了unbind()外 .off()也可以用于解除事件  高版本的jquery库不兼容低版本的jquery库的方法
    });
    
    
});
//step3:移动窗口的步骤:按下鼠标左键——移动鼠标
</script>
</html>
View Code

免责声明:文章转载自《jquery实战——弹出框拖拽效果》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MongoDB(6)- BSON 数据类型reduced penetrance|COPE-PCG下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

转:jQuery 遍历Table中tr中的td中的内容

1、$("#trID td").text()得到的是一个所以trID之中td的值 返回一个字符串。 2、$("#trID").children 得到一个trID下的所有td,然后遍历$("#trID").children使用.eq(index).text()得到td中的值;   <!DOCTYPE html PUBLIC "-//W3C//DTD...

jquery新窗口打开链接

第一种:下面的代码是针对m35ui这个样式下的a都是在新窗口打开 <script type="text/javascript"> jQuery(document).ready(function($) { $('.m35ui a').attr({target: "_blank"}); }); </script> 第二种: <sc...

jQuery 操作Cookie

转自:http://www.cnblogs.com/luluping/archive/2009/04/23/1442465.html jQuery.cookie = function(name, value, options) {          if (typeof value != 'undefined') {                 ...

封装两个简单的Jquery组件

Jquery给我们提供了很大的方便,我们把他看成是一个公共库,以致在这个公共库上延伸出了很多Jquery插件;在项目过程中,有些插件总是不那么令人满意; 主要说两个项目用途: 1、 遮罩层,跟一般的遮罩层不一样,我需要实现的是对某一个元素进行局部遮罩; 2、 冒泡提示,网上有很多,我需要的只是一种在页面指定位置弹出来的一个静止定位的div而已;两个就自己了...

jQuery快速入门

---恢复内容开始--- jQuery 快速入门 jQuery介绍 1、jQuery是一个轻量级的、兼容多浏览器的JavaScript 库。 2、jQuery使用户能够更方便的处理HTML Document、Events、实现动画效果, 方便的进行Ajax交互, 能够极大的简化JavaScript编程。 它的宗旨就是:write less. do more...

jQuery多图上传Uploadify插件使用及传参详解

因为工作需要,这两天接触到了Uploadify插件,由于是第一次用,花了我近一天的时间。下面我把我在用这个插件过程详细的分享出来,也让自己巩固一下,也希望能帮助到你。 所需文件: jquery-1.8.2.min.js (可以低版本)uploadify.cssswfobject.js uploadify.swfjquery.uploadify.js upl...