<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. 2014年Linux 和开源技术回顾盘点

    ZDNet科技观察家StevenJ.Vaughan-Nichols在年终发表了对Linux和开源技术这一年跌宕起伏的总结,细数这一年中的惊喜和不堪. 2014Linux之殇 “心脏出血(Heartbl ...

  2. php手机号正则

    preg_match("/^1[34578]{1}\d{9}$/", $phone)

  3. Debian7安装后的配置(英文环境chromium浏览器中汉字变成方块的问题)

    原文来自:http://www.programgo.com/article/3272573017/ 1.安装文泉宋体 sudo aptitude install xfonts-wqy sudo apt ...

  4. GlobalAlloc()和malloc()、HeapAlloc()

    两者都是在堆上分配内存区.  malloc()是C运行库中的动态内存分配函数,WINDOWS程序基本不使用了,因为它比WINDOWS内存分配函数少了一些特性,如,整理内存.  GlobalAlloc( ...

  5. ThinkPHP3.2.3完整版中对Auth.class.php的使用

    一,先创建数据表 1.think_auth_rule,规则表 id:主键, name:规则唯一标识, title:规则中文名称 status 状态:为1正常,为0禁用, condition:规则表达式 ...

  6. 十进制--->二进制(利用C++栈功能)

    原创 十进制转二进制很简单,其中用到C++的栈功能就能更加方便! stack<int> s; //栈的定义,s已经被定义为一个栈 s.push(); //将20入栈 s.push(); s ...

  7. 简单好用的表单校验插件——jQuery Validate基本使用方法总结

    jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/t ...

  8. PHP foreach引用&

    将以下代码打印 $variable = ['a', 'b', 'c']; foreach ($variable as $key => &$value) { } foreach ($var ...

  9. arcgis for android常见问题回答

    Q:arcgis for android最新版本是多少?(2014-7-18) Arcgis for android 10.2.3 sdk 百度盘下载地址:http://pan.baidu.com/s ...

  10. strcmp返回值布尔类型的判断

    strcmp: 用于比较两个字符串,原型如下: int strcmp ( char const *s1, char const *s2):如果s1小于s2,strcmp函数返回一个小于零的值.如果s1 ...