jquery-11 如何实现标签的鼠标拖动效果

一、总结

一句话总结：核心原理：1、标签实现绝对定位，位置的话跟着鼠标走。2、点击标签的话，给标签绑定事件，停止按住鼠标的话，解除绑定的事件。

1、事件中的return false的作用是什么？

a、防止默认行为的发生
b、防止事件冒泡（一个div里面套一个img，你点click事件，先触发div的click，再穿过div触发img的click事件）

29     function start(event) {

30         deltaX=event.clientX-obj.offset().left;

31         deltaY=event.clientY-obj.offset().top;

32

33         $(document).bind("mousemove", move);

34         $(document).bind("mouseup", stop);

35

36         //阻止默认行为的发生

37         //阻止事件冒泡的发生

38         return false;

39     }

2、event对象如何产生和使用？

事件发生就有event对象，在事件的那个函数里面就可以使用event对象了，也可以把它作为参数传递给其它函数
传进去event对象的位置就可以return false来防止默认事情发生。

29     function start(event) {

30         deltaX=event.clientX-obj.offset().left;

31         deltaY=event.clientY-obj.offset().top;

3、如何实现标签的鼠标拖动效果？

首先给标签绑定鼠标按下事件，获取鼠标位置和标签左上角的差值，鼠标移动的时候给文档对象绑定mousemove事件，鼠标停止按动的时候就解除文档对象所有事件的绑定。

26 function drag(obj){

27     obj.bind("mousedown", start);

28

29     function start(event) {

30         deltaX=event.clientX-obj.offset().left;

31         deltaY=event.clientY-obj.offset().top;

32

33         $(document).bind("mousemove", move);

34         $(document).bind("mouseup", stop);

35

36         //阻止默认行为的发生

37         //阻止事件冒泡的发生

38         return false;

39     }

40

41     function move(event) {

42         obj.css({

43             "left":(event.clientX-deltaX)+"px",

44             "top":(event.clientY-deltaY)+"px"

45         })

46         return false;

47     }

48

49     function stop() {

50         $(document).unbind("mousemove", move);

51         $(document).unbind("mouseup", stop);

52     }

53 }

54

55 obj=$("#div1");

56 drag(obj);

4、js如何将标签对象传递给函数？

获取对象，然后作为参数传递给函数

55 obj=$("#div1");

56 drag(obj);
26 function drag(obj){

27     obj.bind("mousedown", start);

5、如何实现某个元素绑定某个事件的时候执行某个方法？

bind的第二个参数直接方法名，没加字符串，因为js中方法和变量只差一对括号

33         $(document).bind("mousemove", move);
41     function move(event) {

42         obj.css({

43             "left":(event.clientX-deltaX)+"px",

44             "top":(event.clientY-deltaY)+"px"

45         })

46         return false;

47     }

二、如何实现标签的鼠标拖动效果

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>index</title>

     <style>

         #div1{

             position: absolute;

             top:0px;

             left:0px;

             border-radius:256px;

             width:256px;

             height:256px;

             background: #ccc;

             overflow: hidden;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div id="div1">

          <img src="a.png">

     </div>

 </body>

 <script>

 function drag(obj){

     obj.bind("mousedown", start);

     function start(event) {

         deltaX=event.clientX-obj.offset().left;

         deltaY=event.clientY-obj.offset().top;

         $(document).bind("mousemove", move);

         $(document).bind("mouseup", stop);

         //阻止默认行为的发生

         //阻止事件冒泡的发生

         return false;

     }

     function move(event) {

         obj.css({

             "left":(event.clientX-deltaX)+"px",

             "top":(event.clientY-deltaY)+"px"

         })

         return false;

     }

     function stop() {

         $(document).unbind("mousemove", move);

         $(document).unbind("mouseup", stop);

     }

 }

 obj=$("#div1");

 drag(obj);

 </script>

 </html>
 

jquery-11 如何实现标签的鼠标拖动效果的更多相关文章

  1. Web的鼠标拖动效果

    以前写过一个拖动效果的Demo,拖拽元素新位置的计算是放在拖拽元素的mousemove事件中进行的.计算效率差,而且效果不好.所以一直有想怎样才能做出jquery-ui那种顺滑的拖拽效果. 其实顺滑的 ...

  2. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  3. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  4. jquery 鼠标拖动排序Li或Table

    1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Ta ...

  5. JavaScript 实现鼠标拖动元素

    一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...

  6. 使用jQuery实现简单的拖动效果

    转自:http://www.muzilei.com/archives/136 如何实现拖动效果? 浏览DEMO 首先分析下拖动效果原理: 1.当鼠标在被拖动对象上按下鼠标(触发onmousedown事 ...

  7. 用canvas实现鼠标拖动绘制矩形框

    需要用到jCanvas插件和jQuery. jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.mi ...

  8. 使用jquery实现简单的拖动效果，分享源码

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkEAAAERCAIAAADzAOSQAAALRklEQVR4nO3dW5LaaAKEUfa/NkfMGu

  9. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

随机推荐

  1. erlang虚拟机代码运行原理

    erlang是开源的,非常多人都研究过源码.可是.从erlang代码到c代码.这是个不小的跨度.并且代码也比較复杂. 所以这里,我利用一些时间,整理下erlang代码的运行过程.从erlang代码编译 ...

  2. java 位操作 bitwise(按位) operation bit

    java 位操作 bitwise(按位) operation bit //一篇对于 原码 反码 补码 的介绍 http://www.cnblogs.com/zhangziqiu/archive/201 ...

  3. js中event事件处理

    1. HTML事件  直接添加到HTML结构中 function show() { alert('hello'); } <body> <button id="btn&quo ...

  4. 字符设备驱动-----Linux中断处理体系结构

    一.中断处理体系结构的初始化 Linux内核将所有的中断统一编号,使用一个irq_desc结构数组来描述这些中断;每个数组项对应一个中断,也可能是一组中断,它们共用相同的中断号,里面记录了中断的名称. ...

  5. Shiro学习总结（10）——Spring集成Shiro

    1.引入Shiro的Maven依赖 [html] view plain copy <!-- Spring 整合Shiro需要的依赖 --> <dependency> <g ...

  6. powerdesigner逆向自动生成mysql说明文档、PDM

    做EDI的项目的时候,用到相关工具powerdesigner,正好我们的一个项目对数据设计阶段时相关文档没有很好的保存下来,查找了一下powderdesigner相关文档,采用逆向工程,从mysql数 ...

  7. eclipse git冲突解决

    1.工程->Team->同步: 2.从远程pull至本地,就会出现如下内容: 3.使用Merge Tool,执行第二项 4.再手动修改 4.修改后的文件需要添加到Git index中去: ...

  8. xml数据文件上传至数据库

    上传xml文件数据到数据库思路:首先上传需要建校验xml字段的校验文件,然后程序根据后台写好的xml数据文件路径自动读取数据文件,再上传数据文件到数据库之前先根据校验文件校验上传的数据文件的字段是否合 ...

  9. [NPM] Update published npm packages using np

    When we want to update our package we need to do a few things: pull latest from our git remote, bump ...

  10. shell-查看手机分辨率

    使用如下命令,可以查看手机分辨率 adb shell dumpsys window displays 运行结果如下 Display: mDisplayId= init=1080x1920 480dpi ...