// 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. 【模板】任意模数NTT

    题目描述: luogu 题解: 用$fft$水过(什么$ntt$我不知道). 众所周知,$fft$精度低,$ntt$处理范围小. 所以就有了任意模数ntt神奇$fft$! 意思是这样的.比如我要算$F ...

  2. 【二分】bestcoder p1m2

    模型的转化和二分check的细节挺不错的 Problem Description 度度熊很喜欢数组!! 我们称一个整数数组为稳定的,若且唯若其同时符合以下两个条件: 数组里面的元素都是非负整数. 数组 ...

  3. database---many to many relationships(多对多关系型数据库)

    Many to many Relationships A many-to-many relationship occurs when multiple records in a table are a ...

  4. PWA天气应用

    https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0 1.介绍 这里将使用PWA技术来构建一个天气web应用,这个ap ...

  5. 五分钟入门 Dingo API

    基于 https://laravel-china.org/doc... 文档更简洁的描述Dingo,直戳重点,注重实践 Django-Book 概述 Dingo API帮助您轻松快速地构建自己的API ...

  6. NGINX宏观手记

    一.这里的优化主要是指对nginx的配置优化,一般来说nginx配置文件中对优化比较有作用的主要有以下几项: nginx进程数,建议按照cpu数目来指定,一般跟cpu核数相同或为它的倍数. ``` w ...

  7. perl:_DATA_ _LINE_ _FILE_

    这三个应该是句柄: _DATA_ _FILE_ _LINE_ 没有找到具体介绍...记录于此,已被后续补充.

  8. Scrapy实战-新浪网分类资讯爬虫

    项目要求: 爬取新浪网导航页所有下所有大类.小类.小类里的子链接,以及子链接页面的新闻内容. 什么是Scrapy框架: Scrapy是用纯Python实现一个为了爬取网站数据.提取结构性数据而编写的应 ...

  9. Python之路-基础数据类型之字典 集合

    字典的定义-dict 字典(dict)是python中唯⼀的⼀个映射类型.他是以{ }括起来的键值对组成,字典是无序的,key是不可修改的.dic = {1:'好',2:'美',3:'啊'} 字典的操 ...

  10. (转)浅谈测试驱动开发(TDD)

    测试驱动开发(TDD)是极限编程的重要特点,它以不断的测试推动代码的开发,既简化了代码,又保证了软件质量.本文从开发人员使用的角度,介绍了 TDD 优势.原理.过程.原则.测试技术.Tips 等方面. ...