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. Note: Bimodal Content Defined Chunking for Backup Streams

    CDC算法给出了一个chunk的大小的最小值.最大值.平均值的界定. Method Using chunk existence information breaking-apart algorithm ...

  2. C# Stack堆栈的使用方法

    堆栈(Stack)代表了一个后进先出的对象集合.当您需要对各项进行后进先出的访问时,则使用堆栈.当您在列表中添加一项,称为推入元素,当您从列表中移除一项时,称为弹出元素. Stack 类的方法和属性 ...

  3. php模拟post提交数据

    $data = '{ "id": "17999030", "method": "sayHello", "jso ...

  4. 小程序组件交互 -- 传入js

    1.父组件(wxml页面)向子组件传递 在子组件中定义需要传入的属性 properties: { count: { type: Number, value: 0, observer:function( ...

  5. Retina显示屏-揭秘移动端的视觉稿通常会设计为传统PC的2倍

    一.Retina显示屏简介 retina:一种具备超高像素密度的液晶屏,同样大小的屏幕上显示的像素点由1个变为多个,如在同样带下的屏幕上,苹果设备的retina显示屏中,像素点1个变为4个. reti ...

  6. 我选择了学Python

    我觉得选择了这个行业,技术不行不是最可怕的,但是要有这种意愿去改变,要有学习的上进心. 人生三件事很重要,第一.在关键时候自己的选择很重要,第二.找到自己的贵人很重要,第三.就是付诸行动去做很重要. ...

  7. Silverlight 创建 ImageButton

    这几天一直在折腾怎么在silverlight 按钮上添加图片,直接向imagebutton那样设置成属性可以直接更改,最后到处查找资料终于搞出一个imagebutton了. <Style x:K ...

  8. 美国一家科技公司毕威拓(Pivotal)规定员工在早上9点06分准时上班,以提高工作效率。

    美国一家科技公司毕威拓(Pivotal)规定员工在早上9点06分准时上班,以提高工作效率. 据<英国广播公司BBC>报道,美国科技公司毕威拓(Pivotal)的员工每天都要在9点06分准时 ...

  9. java编程如何实现2017-01-16 22:28:26.0这样的时间数据,转换成2017:01:16:22:28:26这样的时间数据

    不多说,直接上干货! timereplace.java package zhouls.bigdata.DataFeatureSelection.util; /* * 这个程序,是用来做补充的 */ p ...

  10. ElasticSearch入门-搜索(java api)

    ElasticSearch入门-搜索(java api) package com.qlyd.searchhelper; import java.util.Map; import net.sf.json ...