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实战——弹出框拖拽效果》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇点击后编辑文本,文本框失去焦点后提交内容,重新变为文本

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

相关文章

jquery mobile navbar列表appendTo追加选项

第一种 $(function(){ $("#menu").html("<li><a href=''>Test Styling</a></li>"); $("#navbar").navbar();}); 第二种 var footer = $("#footer-id");var navBar = $("di...

jQuery之$工具方法

方法 $.each():遍历数组或对象中的数据。 $.trim():去除字符串两边的空格。 $.type(obj):得到数据的类型。 $.isArray(obj):判断是否是数组。 $.isFunction(obj):判断是否是函数。 $.parseJSON(json):解析json字符串转换为js对象/数组。 示例 <!DOCTYPE html&g...

常用jquery片断

**1、检测Internet Explorer版本** 当涉及到CSS设计时,对开发者和设计者而言Internet Explorer一直是个问题。尽管IE6的黑暗时代已经过去,IE也越来越不流行,它始终是一个能够容易检测的好东西。当然了,下面的代码也能用于检测别的浏览器。 $(document).ready(function() { if (navig...

jQuery.extend 函数详解(转)

JQuery的extend扩展方法:Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。一、Jquery的扩展方法原型是:    extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以...

jQuery基础(1)

一、jQuery的介绍 1、为什么要使用jQuery? 在用js写代码时,会遇到一些问题,如下: 1)window.onload 事件有事件覆盖的问题,因此只能写一个事件; 2)代码容错性差; 3)浏览器兼容性问题; 4)书写很繁琐,代码量多; 5)代码很乱,各个页面到处都是; 6)动画效果很难实现; 关于window.onload,举一个例子: &l...

使用Jquery,CSS3实现像GooglePlus那样的圆圈效果

我们要实现像Google+ 那样圆圈效果, 不使用图片.这里只使用CSS3与JQuery, 先定义CSS: 1: <style type="text/css"> 2: div.circle { 3: margin: 100px auto; 4: 200px; 5: height:200px; 6: } 7:...