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. c++操作当前窗体句柄

    句柄 这一概念是MFC里的一个类.MFC有专门的函数来获取窗体句柄. HWND hwnd; hwnd=CreateWindow("my own windowshandle",&qu ...

  2. LeetCode 06 ZigZag Conversion

    https://leetcode.com/problems/zigzag-conversion/ 水题纯考细心 题目:依照Z字形来把一个字符串写成矩阵,然后逐行输出矩阵. O(n)能够处理掉 记i为行 ...

  3. js05---js实现Map

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. Maven搭建hadoop环境报Missing artifact jdk.tools:jdk.tools:jar:1.7（5种办法，2种正解）

    刚刚写的那一篇,是网上比较主流的解决办法. 鉴于实际情况,有伙伴的机器上没有遇到这个问题,我们再探究原因,最终还有4种情况需要说明. 先说,另外一种"正解". <depend ...

  5. 洛谷 P1223 排队接水

    洛谷 P1223 排队接水 题目描述 有n个人在一个水龙头前排队接水,假如每个人接水的时间为Ti,请编程找出这n个人排队的一种顺序,使得n个人的平均等待时间最小. 输入输出格式 输入格式: 输入文件共 ...

  6. 请使劲回答一个关于UNIX/Linux自己主动扩展stack的问题

    有本事就出来,没本事就当鳖! 假设让我回答关于进程栈,线程栈的问题,仅仅要问题不笼统,仅仅要问题明白.我会一五一十地回答,正确率上九成,然而,可悲的是,问题往往他妈的都不是非常明白,因此,游戏到此结束 ...

  7. 2. Dubbo和Zookeeper的关系

    转自:https://www.cnblogs.com/hirampeng/p/9540243.html Dubbo建议使用Zookeeper作为服务的注册中心. 1.   Zookeeper的作用: ...

  8. Android内存泄露分析之StrictMode

    转载请注明地址:http://blog.csdn.NET/yincheng886337/article/details/50524709 StrictMode(严格模式)使用 StrictMode严格 ...

  9. trunc与round

    TRUNC(number[,num_digits])   number 需要截尾取整的数字. num_digits 用于指定取整精度的数字.Num_digits 的默认值为 0. 作用:截断数字和时间 ...

  10. [Vue] Load components when needed with Vue async components

    In large applications, dividing the application into smaller chunks is often times necessary. In thi ...