var ChildDiv = $("#cid");
var width = 0; //鼠标点击子div的地方和子div的左边边距距离
var height = 0; //鼠标点击子div的地方和子div的上边边距距离
ChildDiv.onmousedown = function (ev) //鼠标按下DIV
{
var ChildDivEvent = ev || event; //捕获点击的对象
width = ChildDivEvent.clientX - ChildDiv.offsetLeft;
height = ChildDivEvent.clientY - ChildDiv.offsetTop;
document.onmousemove = function (ev) //鼠标移动
{
var ChildDivEvent = ev || event;
var x = ChildDivEvent.clientX - width;
var y = ChildDivEvent.clientY - height;
if (x < 0) //当DIV的Left小于0,也就是移出左边
{
x = 0; //就把DIV的Left设置为0,就不能移出左边
} else if (x > $("#pid").width() - ChildDiv.offsetWidth) //DIV不能移出父DIV的右边
{
x = $("#pid").width() - ChildDiv.offsetWidth;
}
if (y < 0) //上边
{
y = 0;
} else if (y > $("#pid").height() - ChildDiv.offsetHeight) //下边
{
y = $("#pid").height() - ChildDiv.offsetHeight;
}
ChildDiv.style.left = x + 'px'; //DIV的Left设置为新鼠标X坐标减去width的值
ChildDiv.style.top = y + 'px'; //DIV的Top设置为新鼠标Y坐标减去height的值
};
document.onmouseup = function () //鼠标松开时
{
document.onmousemove = null; //把鼠标移动清除
document.onmouseup = null; //把鼠标松开清除
};
return false;
};

js在一个div里面移动其子div的更多相关文章

  1. 如何在一个div中使其子div居中

    网上其他地方已讲述过对其的不同实现方式,今天主要做一个详细的汇总,希望对大家有帮助. ps:我面试的时候就被问到过这个问题,当时都回答错了,蓝瘦. 假设父div的类名为father,子div的类名为s ...

  2. 父div高度不能根据子div高度自动变化的解决方案

    <div id="parent"> <div id="content"> </div> </div> 当cont ...

  3. css 实现 左右div 等高, 同时父级div就是最高的子div的高度

    原文地址:https://www.cnblogs.com/cbza/p/7145384.html 方法一: 通过父级overflow:hidden,  自己设置padding-bottom 和 mar ...

  4. 父div高度不能自适应子div高度的解决方案

    <div id="parent"><div id="content"> </div></div> 当conten ...

  5. jQuery滚动广告 解决子div绝对定位与父div重叠引起的闪烁问题

    这两天做了一个滚动广告栏的demo 功能有自动轮播 左右箭头移动 导航点选中图片移动效果 模仿的是新浪体育的广告 最难的问题就是子div绝对定位于父div 鼠标移入子div 系统会判定鼠标移出了父di ...

  6. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  7. CSS+DIV:父DIV相对定位+子DIV绝对定位

    如何在一个div内将一个div进行绝对定位呢?很简单,把父div的position属性设为relative,子div的position属性设为absolute就可以了... 示例: <html& ...

  8. div鼠标悬停,子元素上移,鼠标移出,子元素下移动画。

    HTML: <div class="edt_title" > <div id="edt_title"> <p class=&quo ...

  9. 子div设置浮动无法把父div撑开。

    <div class="mainBox"> <div class="leftBox"></div> <div clas ...

随机推荐

  1. postgres_fdw

    create extension postgres_fdw; --创建扩展 create server db0 foreign data wrapper postgres_fdw OPTIONS (h ...

  2. 让你的spring-boot应用日志随心所欲--spring boot日志深入分析

    1.spring boot日志概述 spring boot使用Commons Logging作为内部的日志系统,并且给Java Util Logging,Log4J2以及Logback都提供了默认的配 ...

  3. Macbook sublime 安装markdown插件

    Sublime Text为3 版本 安装sublime text 插件,需要“***”,不会弄的,就可以移步了. 首先按 command + shift + p 调出安装插件的界面,输入“instal ...

  4. 10分钟了解什么是BFC

    BFC对于已经是一个耳熟能详的词汇了,而且在前端面试中,这题也是一个高频题.虽然我们平时在开发的时候知道如何利用BFC来解决问题,但是我们要具体说出BFC的概念和怎么触发BFC,我相信很多小伙伴也是和 ...

  5. ch8 -- directMethod

    稀疏直接法 主要用的g2o的方法.自己定义了一个新的一元边.边的误差项是测量值和由估计得来的x,y对应的灰度值之间的误差.导数为灰度对像素坐标的导数乘以像素坐标对yi*李代数的导数的负数.灰度对于像素 ...

  6. github:当你想要使用VSCODE开心提交代码时,出现Git:git@github.com:Permission denied(publickey)解决方案

    当你想要使用VSCODE开心提交代码时,出现Git:git@github.com:Permission denied(publickey)弹框 图片: 原因:电脑公钥(publickey)未添加至gi ...

  7. 注意ie6的盒模型

    浏览器版本多了,也是一个累,特别是ie家族的. 网上搜罗了一大堆,发现说的和我看到的不一样啊,结果才发现原来是对方表述有问题,省略了几个字就产生了歧义了. 按照网上说的ie6对盒模型解释不符合W3C标 ...

  8. Codeforces Beta Round #79 (Div. 1 Only) B. Buses 树状数组

    http://codeforces.com/contest/101/problem/B 给定一个数n,起点是0  终点是n,有m两车,每辆车是从s开去t的,我们只能从[s,s+1,s+2....t-1 ...

  9. JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳

    一.前言 有些东西很好用,但是你未必知道:有些东西你可能用过,但是你未必知道原理.实现一个目的有多种途径,俗话说,条条大路通罗马.发散一下大家的思维以及拓展一下知识面. 二.实现一个简短的sleep函 ...

  10. SpringMVC05 return (Json)

    这里要主要的是js文件要引入,文中不做解释 1.导入包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xs ...