// Start 窗口的拖动
var _move=false; //移动标记
var _x,_y; //鼠标离控件左上角的相对位置
$(document).ready(function(){
$(".box h4").click(function(){
// alert("click");//点击(松开后触发)
}).mousedown(function(e){
var _this = $(".box");
if(!_move){
_move=true;
_x=e.pageX-parseInt(_this.css("left"));
_y=e.pageY-parseInt(_this.css("top"));
}else{
_move=false;
}
});
$(document).mousemove(function(e){
var _this = $(".box");
if(_move){
var x=e.pageX-_x;
var y=e.pageY-_y;
_this.css({top:y,left:x});
}
}).mouseup(function(){
var _this = $(".box");
_move=false;
});
});

jquery 实现鼠标点击div盒子移动功能的更多相关文章

  1. jQuery实现鼠标点击div外的地方div隐藏消失的效果(转)

    转:https://www.cnblogs.com/jsingleegg/p/3456152.html css部分: <style type="text/css">.p ...

  2. jQuery实现鼠标点击div外的地方div隐藏消失的效果

    css部分: <style type="text/css"> .pop { width:200px; height:130px; background:#080;} & ...

  3. jQuery实现鼠标点击Div区域外隐藏Div

    冒泡定义:当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡:这个事件从原始元素开始一直冒泡到DOM树的最上层.(摘自网络 ...

  4. 使用JS或jQuery模拟鼠标点击a标签事件代码

    原文 使用JS或jQuery模拟鼠标点击a标签事件代码 这篇文章主要介绍了使用JS或jQuery模拟鼠标点击a标签事件代码,需要的朋友可以参考下 <a id="alink" ...

  5. 使用jQuery模拟鼠标点击a标签事件

    来源于:https://mo2g.com/view/42/ <html> <head> <meta charset="UTF-8"> <t ...

  6. 使用JS或jQuery模拟鼠标点击a标签事件

    <a id="alink" href="abc.aspx"  style="visibility: hidden;">下一步&l ...

  7. 鼠标移动或者鼠标点击div消失不见排查

    点击事件,导致某div或者容器样式隐藏,如果不能直接发现click事件绑定,那么首先排查哪些方法在控制div的样式, 然后看一看哪些方法在调用修改样式的方法. 然后再排查什么在调用修改样式的方法的方法 ...

  8. 鼠标点击DIV后,DIV的背景变色(js)

    <!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs ...

  9. 鼠标点击input时,placeholder中的提示信息消失

    html代码: <input type="text" placeholder="多个关键词空格隔开"> 鼠标点击input时,placeholder ...

随机推荐

  1. C++笔记(仅C++特性,需C语言基础)

    C++复习笔记一(类的声明定义应用与构造函数析构函数部分)const在C语言中是"不能被改变值的变量",而在C++种子则是"一种有类型描述的常量",常量必须初始 ...

  2. 关于JS的继承总结

    最近都在巩固JS的基础知识,今天组要看的是有关继承方面的,每次看都会加深自己的理解呢 1.借助构造函数实现继承 原理:在子类中改变父类this的指向 function Parent1() { this ...

  3. 51nod 1135 原根 (数论)

    题目链接 建议与上一篇欧拉函数介绍结合食用. 知识点:1.阶:a和模m互质,使a^d≡1(mod m)成立的最小正整数d称为a对模m的阶(指数)   例如: 2^2≡1(mod3),2对模3的阶为2; ...

  4. (40)zabbix监控web服务器访问性能

    zabbix web监控介绍 在host列可以看到web(0),在以前的版本这项是独立出来的,这个主要实现zabbix对web性能的监控,通过它可以了解web站点的可用性以及性能. 最终将各项指标绘制 ...

  5. IE10无法识别setPrototypeOf属性问题

    项目遇到一个需求,React16.6.0兼容IE10浏览器 首先在IE浏览器打开,IE11可以支持,打开控制台切换到IE10,页面白屏,控制台报错. 控制台报错 vue2.0 兼容ie9及其以上 Ma ...

  6. 前端,基础选择器,嵌套关系.display属性,盒模型

    基础选择器 1.统配选择器 控制html,body及body内跟显示相关的标签 *{ width:80px; height:80px; background-color:red; } 2.类选择器 以 ...

  7. python爬虫入门六:Selenium库

    在我们爬取网页过程中,经常发现我们想要获得的数据并不能简单的通过解析HTML代码获取,这些数据是通过AJAX异步加载方式或经过JS渲染后才呈现在页面上显示出来. selenuim是一种自动化测试工具, ...

  8. 强制停止及删除(卸载)Windows服务

    1. 安装服务: CMD 打开命令行窗口:C:\> 运行:"C:\Windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe& ...

  9. php expat+DOM+SimpleXML XML读取

    XML 文件 将在我们的例子中使用下面的 XML 文件: <?xml version="1.0" encoding="ISO-8859-1"?> & ...

  10. 学习笔记1——下载和安装WordPress

    首先,到WordPress官方网站下载WordPress,下载地址https://cn.wordpress.org/txt-download/ 然后,将下载后的文件夹放在www目录下,到浏览器中输入l ...