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. 洛谷P3201 [HNOI2009]梦幻布丁

    题目描述 N个布丁摆成一行,进行M次操作.每次将某个颜色的布丁全部变成另一种颜色的,然后再询问当前一共有多少段颜色.例如颜色分别为1,2,2,1的四个布丁一共有3段颜色. 输入输出格式 输入格式: 第 ...

  2. scroolspy滚动监听插件

    <nav id="nav" class="navbar navbar-default"> <a href="#" clas ...

  3. 判断移动端跳转，从移动端来的不跳转。利用localStorage保存状态，window.location.pathname跳转不同的url

    手机访问 www.yourdomain.com 跳转,从m.yourdomain.com来的不跳转. 访问www.yourdomain.com/category8, 跳转到m.yourdomain.c ...

  4. Appium_python3使用汇总

    1. 对webview页面元素的处理self.driver.switch_to.context("WEBVIEW_com.aaa.bbb")source = self.driver ...

  5. ProgressBar-style属性分析

    首先我们看下framework下关于进度条的style定义,如下 <style name="Widget.ProgressBar"> <item name=&qu ...

  6. Bitmap-把方形图片处理为圆形

    这个是直接在网上转载的,自己验证可靠 转载自http://my.oschina.net/zhouz/blog/213164 直接贴上代码 import android.graphics.Bitmap; ...

  7. Core Animation 文档翻译—附录B（可动画的属性）

    前言   许多CALayer和CIFliter的属性都是可动画的.本节附录列出了这些属性默认使用的动画.   CALayer可动画属性   表B-1展示了CALayer类的可动画属性.针对每个属性此表 ...

  8. 89.hash算法实现CSDN密码处理

    初始化,数据的行数,hash链表结构体,存储头结点 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdl ...

  9. socket UDP简单通讯

    // // SocketUDPServerClient.m // socket_server_client // // Created by lujunjie on 2016/11/26. // Co ...

  10. CodeVs——T 4919 线段树练习4

    http://codevs.cn/problem/4919/  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Descr ...