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. 高速数论变换(NTT)

    今天的A题.裸的ntt,但我不会,于是白送了50分. 于是跑来学一下ntt. 题面非常easy.就懒得贴了,那不是我要说的重点. 重点是NTT,也称高速数论变换. 在非常多问题中,我们可能会遇到在模意 ...

  2. listview-fading 滚动条样式设置

    fadingEdge-属性用来设置拉滚动条时 ,边框渐变的方向.它有三个属性值可以设置 none:(边框颜色不变) horizontal:(水平方向颜色变淡) vertical:(垂直方向颜色变淡). ...

  3. php数组时按值传递还是按地址传递

    php数组时按值传递还是按地址传递 一.总结 1.数组都是按值:php普通变量和数组的赋值(=)是按值传递,对象的赋值(=)是按址传递 2.对象和按值和按址:对象的clone(用clone关键字)是按 ...

  4. 分组的listview——ExpandableListView

    开发使用到的数据统计时可以用分组的ExpandablelistView 效果:

  5. C# 截取中英文混合字符串分行显示宽度相同

    /// <summary>        /// 截取方法名显示宽度        /// </summary>        /// <param name=" ...

  6. InstallShield详细制作说明(一)

    虽然网上关于InstallShield的制作说明已经很多,但是看的时候还是会有些晕乎乎的,不得不说很复杂.前段时候做了一次,后面需要升级,在重新做的时候发现有些地方自己又忘了,所以有必须将自己看的教程 ...

  7. POJ 1113 Wall 求凸包

    http://poj.org/problem?id=1113 不多说...凸包网上解法很多,这个是用graham的极角排序,也就是算导上的那个解法 其实其他方法随便乱搞都行...我只是测一下模板... ...

  8. [JWT] JWT Signature With RS256 - Learn The Advantages Compared to HS256

    The advantage of RS256 over HS256 is RS256 no longer need to share the secret key between client and ...

  9. Emgucv 图像操作笔记

    这里记下一些学习过程中的心得和技巧.我用VS2008,C#的平台进行编写. 1.将图片载入PictureBox的方法: Image<Bgr, byte> img = new Image&l ...

  10. Stack overflow 编译能通过，运行时出现Stack overflow

    Stack overflow 编译能通过,运行时出现Stack overflow 大家都知道,Windows程序的内存机制大概是这样的,全局变量(局部的静态变量本质也属于此范围)存储于堆内存,该段内存 ...