<div id="boxDiv" style='width:20px;height:20px;position:absolute;background:red;'>
 
 
$('#boxDiv').bind('mousedown',function(){
  $(document).bind('mousemove',function(event){
    var x = event.clientX + 'px';
    var y = event.clientY + 'px';
    $('#boxDiv').css({"left":x,"top":y});
  });
  $(document).bind('mouseup',function(event){
    $(document).unbind('mousemove');
   });
});

鼠标拖动div,div跟随鼠标移动效果的更多相关文章

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

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

  2. 鼠标拖动改变DIV等网页元素的大小的最佳实践

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...

  3. 鼠标移动事件(跟随鼠标移动的div)

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. [置顶] 原创鼠标拖动实现DIV排序

    先上效果图: 对比传统的排序,这是一个很不错的尝试,希望对大家有启发. 大家可以参考我的上一篇博文:http://blog.csdn.net/littlebo01/article/details/12 ...

  5. [ActionScript 3.0] AS3 用于拖动对象时跟随鼠标的缓动效果

    package com.fylibs.components.effects { import flash.display.DisplayObject; import flash.events.Even ...

  6. html页面设置一个跟随鼠标移动的DIV(jQuery实现)

    说明业务:鼠标放到某个标签上,显示一个div,并跟随鼠标移动 html页面(直接放body里面): <a href="#" id="'+data[i].refund ...

  7. 阻止右键菜单(阻止默认事件)&&跟随鼠标移动(大图展示)&&自定义右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 跟随鼠标指针跑的div拖拽效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. 使用JS制作一个鼠标可拖的DIV(一)——鼠标拖动

    使用 JS 来实现一个可拖动的DIV,主要是使用到以下几个事件: 1.鼠标按下:DIV元素的onmousedown. 2.鼠标按住拖动:document 的 onmousemove 元素. 3.鼠标放 ...

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

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

随机推荐

  1. SQL Server CLR全功略之一---CLR介绍和配置

    Microsoft SQL Server 现在具备与 Microsoft Windows .NET Framework 的公共语言运行时 (CLR) 组件集成的功能.CLR 为托管代码提供服务,例如跨 ...

  2. 面试题:hibernate 有用

    1. Hibernate的工作流程? 答案: 1.通过Configuration对象读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory对象 3.打开session 4.创建事 ...

  3. Luogu 4159 [SCOI2009]迷路

    BZOJ 1297 应当是简单题. 发现边权的数量很小,所以我们暴力把一个点拆成$9$个点,然后把$(x, i)$到$(x, i + 1)$连边,代表转移一次之后可以走回来:对于每一条存在的边$(i, ...

  4. AutoLayout自动布局之VFL语言代码实现(一个神奇的语言)

    一.什么是VFL语言?为什么要VFL语言? VFL全称是Visual Format Language,翻译过来是“可视化格式语言” VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言 ...

  5. 编译boost,去掉不使用的组件

    说明:下面内容仅针对Linux环境(boost官网为:http://www.boost.org/,可从这里下载它的源代码包,这里要求下载.tar.gz包,而非.7z..zip或bz2包). 在当前目录 ...

  6. ASP.NET中Service接受前端单个及多个数据的写法

    MVC中的Service主要是用来处理数据交互的. 前端页面传递一个或者多个参数到Service的写法: 一个参数写法: public DataTable 方法名 (Pagination pagina ...

  7. logback 常用参数配置详解

    logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写 ...

  8. create-react-app设置proxy反向代理不起作用

    在CRA2.X升级以后对proxy的设置做了修改,引用官方升级文档: Object proxy configuration is superseded by src/setupProxy.js To ...

  9. Autofac的Autofac.Core.Activators.Reflection.DefaultConstructorFinder错误解决方案。

    在使用Autofac的时候,不给力,看着例子来的,人家没问题,我就报了Autofac.Core.Activators.Reflection.DefaultConstructorFinder错误. 百般 ...

  10. 七、CommonJS规范和Note.js模块概念的介绍

    在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护.为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多 ...