<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 把表中字段存储的逗号隔开内容转换成列表形式

    我们日常开发中,不管是表设计问题抑或是其他什么原因,或多或少都会遇到一张表中有一个字段存储的内容是用逗号隔开的列表. 具体效果如下图: ------> 从左边图转换成右边图,像这种需求,我们难免 ...

  2. 关于box-sizing属性

    写在前面 文中错误或不足之处欢迎指正批评,共同交流! 在项目中写css组件时遇到一个问题: 要求两个按钮均分其父元素宽度,且父元素宽度不固定,像这样: 第一反应很自然的想到使用flex布局,但是由于需 ...

  3. Luogu 4213 【模板】杜教筛(Sum)

    当作杜教筛的笔记吧. 杜教筛 要求一个积性函数$f(i)$的前缀和,现在这个东西并不是很好算,那么我们考虑让它卷上另外一个积性函数$g(i)$,使$(f * g)$的前缀和变得方便计算,然后再反推出这 ...

  4. 黑盒测试实践-任务进度-Day03

    任务进度11-28 使用工具 selenium 小组成员 华同学.郭同学.穆同学.沈同学.覃同学.刘同学 任务进度 经过了前两天的学习任务的安排,以下是大家的任务进度: 华同学(任务1) 1.今天就接 ...

  5. CentOS6.5 Eclipse C++ 版本 OpenCV

    最近在搞Linux上用Eclipse(C++版本)开发 OpenCV,配环境配的那真是配到天昏地暗,不知所措,好在配成功了,期间参考了大量的帖子,所以,特立此贴,希望能给后来人一些小建议! 1.Cen ...

  6. linux 的各个文件夹都是干什么用

    http://www.ruanyifeng.com/blog/2012/02/a_history_of_unix_directory_structure.html http://www.pathnam ...

  7. 合成(Composite)模式

    一. 合成(Composite)模式 合成模式有时又叫做部分-整体模式(Part-Whole).合成模式将对象组织到树结构中,可以用来描述整体与部分的关系. 合成模式可以使客户端将单纯元素与复合元素同 ...

  8. linux select 返回值

    IBM AIX上 select返回值的 man if  a connect-based socket is specified in the readlist parameter and the co ...

  9. docker webapi

    dockerfile FROM microsoft/aspnetcore:2.0 COPY . /docker1 WORKDIR /docker1 EXPOSE ENTRYPOINT ["d ...

  10. java关键字(更新)

    1.final: ①final修饰类:该类不能被继承: ②final修饰方法:该方法不能被子类重写: ③final修饰变量:一.修饰基本数据类型变量,必须初始化,且值不能被改变:二.修饰引用数据类型变 ...