jQuery实现div拖拽效果实例分析

本文实例分析了jQuery实现div拖拽效果。分享给大家供大家参考，具体如下：

<!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="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);
//保持最下一行，不用滚

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery常见经典特效汇总》、《jQuery扩展技巧总结》、《jquery选择器用法总结》及《jquery常用操作技巧汇总》

希望本文所述对大家jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery实现div拖拽宽度示例代码

    本例是个非常简单的div拖动,有需要的朋友可根据自己的需求,添加相应的代码.欢迎拍砖 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html style="height:100%;"> <head> <meta http-e

  • jQuery拖拽div实现思路

    思路是利用jquery的mousemove,mousedown,mouseup三个事件,定义两个相对位置,分别是 1.组件左上角与屏幕左上角的相对位置 2.鼠标所在坐标与组件左上角的相对位置. 具体函数如下: 复制代码 代码如下: .drag{ position:absolute; background:#0000CC; top:100px;left:200px; padding:0; } 复制代码 代码如下: $(document).ready(function(){ var move=fal

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

  • jQuery控制Div拖拽效果完整实例分析

    本文实例讲述了jQuery控制Div拖拽效果的方法.分享给大家供大家参考.具体如下: <!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"> <

  • jQuery div拖拽用法实例

    本文实例讲述了jQuery div拖拽用法.分享给大家供大家参考,具体如下: 这里需要引用好jquery 和 jqueryui两个包: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta n

  • jQuery使用drag效果实现自由拖拽div

    偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mousedown事件,鼠标mousedown的时候记录此时的鼠标X轴和Y轴以及拖拽框的left和top,并且给拖拽标记赋值true,代表拖拽动作就绪.第二步是mousemove事件,此时动态获取鼠标的X轴和Y轴,然后计算出来拖拽框新的left和top并赋值使其实现拖拽效果.第三步是mouseup事件,鼠标弹

  • jquery实现拖拽调整Div大小

    今天写了一天这个jquery插件: 可以实现对div进行拖拽来调整大小的功能. 复制代码 代码如下: (function ($) {     $.fn.dragDivResize = function () {         var deltaX, deltaY, _startX, _startY;         var resizeW, resizeH;         var size = 20;         var minSize = 10;         var scroll

  • jQuery实现div拖拽效果实例分析

    本文实例分析了jQuery实现div拖拽效果.分享给大家供大家参考,具体如下: <!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=&q

  • js实现弹出框的拖拽效果实例代码详解

    具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&

  • jquery实现简单的拖拽效果实例兼容所有主流浏览器

    jquery实现简单的拖拽效果实例兼容所有主流浏览器

    最近发现web网页的拖拽效果,个人觉得是一种不错的用户体验,抽空研究了一下,原理还蛮简单的,下面贴一下我写的一个简单拖拽jquery自定义函数. jquery代码:fun.js 复制代码 代码如下: jQuery.fn.myDrag=function(){ _IsMove = 0; _MouseLeft = 0; _MouseTop = 0; return $(this).bind("mousemove",function(e){ if(_IsMove==1){ $(this).off

  • Vue使用自定义指令实现拖拽行为实例分析

    本文实例讲述了Vue使用自定义指令实现拖拽行为.分享给大家供大家参考,具体如下: 需求 通过自定义指令的方式实现拖拽效果,预期的使用方式为: <div style="background: #f00; width: 200px; height: 200px;" v-drag> XXXX </div> 更重要的一个需求点: 拖拽元素内部的子元素可以自行阻止拖拽行为 比如: <div style="background: #f00; width: 2

  • js实现简单div拖拽功能实例

    本文实例讲述了js实现简单div拖拽功能的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="

  • jquery实现简单拖拽效果

    本文实例为大家分享了jquery实现简单拖拽的具体代码,供大家参考,具体内容如下 基本思路: 1.首先需要鼠标按下拖动区域,也就是需要调用 mousedown 方法 2.鼠标移动,需要拖动的元素跟着鼠标移动,调用 mousemove 方法 3.鼠标弹起拖动消失,调用 mouseup 方法 下面看一下代码: 页面结构: 样式: .drag { width: 200px; height: 200px; background-color: skyblue; position: absolute; }

  • Android仿美团拖拽效果实例代码

    Android仿美团拖拽效果实例代码

    效果图 如上图,实现了拖拽事件的无缝过渡.效果很流畅很自然,之所以写轮子因为实在找不到好用的库,该库参考了https://github.com/woxingxiao/SlidingUpPanelLayout ,其实在大神的开源库里就有Issues提到内嵌 scrollView 时滑动冲突的问题.再加上最近项目里面的详情页就有这样的拖拽效果需求,只好自己实现一遍. 在实现的过程中,就遇到几个比较棘手的问题,也经过了一番挣扎才想出解决的方案. 困难 拖拽释放的时机,如下拉1/6就自动收缩否则回弹,上

  • jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)

    jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)

    相对于上一篇,优化了拖拽的效果. js代码:fun.js 复制代码 代码如下: _MoveObj = null;//全部变量,用来表示当前div z_index = 0;//z方向 jQuery.fn.myDrag=function(){ _IsMove = 0; //是否移动 1.移动 _MouseLeft = 0; //div left坐标 _MouseTop = 0; //div top坐标 $(document).bind("mousemove",function(e){ if

随机推荐