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. HTML5学习笔记(七)WebSocket

    WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.在WebSocket API中,浏览器和服务器只需要做一个握手的动作 浏览器通过 JavaScript 向服务器 ...

  2. 《OD学hadoop》20160904某旅游网项目实战

    一.ETL操作 抽取数据 日志格式: 分割符号:^A IP地址 服务器时间 二.Java工程 1. 创建项目 copy代码及配置文件 2. 改配置 core-site.xml hbase-site.x ...

  3. 没有找零 状压dp

    没有找零 状压dp 约翰到商场购物,他的钱包里有K(1 <= K <= 16)个硬币,面值的范围是1..100,000,000.约翰想按顺序买 N个物品(1 <= N <= 1 ...

  4. bzoj 2827: 千山鸟飞绝

    2827: 千山鸟飞绝 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 802  Solved: 228[Submit][Status][Discuss ...

  5. css 权重值(层叠性)详解

    目录 css权重值(重叠性)实例 权重值的计算 !important 提升权重值实例 什么情况下可以使用!important ? 总结: css权重值(重叠性)实例 css中有很多选择器,那在多个选择 ...

  6. centos 基础设置

    centos 6 关闭防火墙 查看防火墙是否开启 service iptables status 停止防火墙 service iptables stop 禁止开机自启动防火墙 chkconfig ip ...

  7. spring boot 使用WebSocket与前端进行byte字节数组交互

    一.装逼前先热热身 无论是比较传统的 web项目 还是近几年流行的前后端分离,后端只独立提供数据交互接口服务的项目,都避免不了数据之间交互格式的选择. 从很早之前的 xml 格式 到现在最火热的jso ...

  8. 关于苹果出现NaN的情况----由Date格式解析方式不同引起的Bug

    源于一个工作中遇到的问题:IOS 上时间显示为 NaN,而安卓上时间显示正常. 问题的根源在于 安卓 和 苹果 对于 JS Date 对象的不同解析. 安卓: new Date("2018- ...

  9. 基于CentOS系统下的Oracle的安装

    背景 最近的数据库的实验课,要求利用虚拟机安装CentOS系统,并在此系统上安装Oracle_11g软件实现监听,在windows系统上安装SQL Developer软件作为客户端 ,从而可以在SQL ...

  10. spring retry注解

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...