<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. 1-如何自己在eclipse上配置Andriod环境

    转载:http://blog.csdn.net/dr_neo/article/details/49870587 最新鲜最详细的Android SDK下载安装及配置教程 2015年11月16日 19:2 ...

  2. 数据结构 Merge合并排序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. Cannot resolve the collation conflict between "Chinese_PRC_CI_AS" and "SQL_L及由于排序规则不同导致查询结果为空的问题

    报错:Cannot resolve the collation conflict between "Chinese_PRC_CI_AS" and "SQL_L 出错原因: ...

  4. js选择文件夹路径

    该方法只支持IE. 语法:strDir=Shell.BrowseForFolder(Hwnd,Title,Options,[RootFolder])参数:Hwnd:包含对话框的窗体句柄(handle) ...

  5. css总结11:css的overflow问题

    1 排版时经常遇到块级元素内容overflow,怎么妥当处理是一个关键. overflow的常用属性:  代码: <!DOCTYPE html><html lang="en ...

  6. (转)Asp.Net生命周期系列五

    原文地址:http://www.cnblogs.com/skm-blog/p/3188697.html 如果您看了我的前四篇文章,应该知道目前Http请求已经流到了HttpModule这个程序员手中了 ...

  7. QGIS编译教程

    注意更新时间:Thursday November 02, 2017 1. Introduction 简介 This document is the original installation guid ...

  8. Floyd-Warshall求图中任意两点的最短路径

    原创 除了DFS和BFS求图中最短路径的方法,算法Floyd-Warshall也可以求图中任意两点的最短路径. 从图中任取两点A.B,A到B的最短路径无非只有两种情况: 1:A直接到B这条路径即是最短 ...

  9. Android之AlterDialog介绍

    效果: 1.简单对话框 AlertDialog.Builder builder=new AlertDialog.Builder(AlterDialogActivity.this); builder . ...

  10. 20145218PC平台逆向破解

    20145218PC平台逆向破解 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同 ...