js在一个div里面移动其子div
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的更多相关文章
- 如何在一个div中使其子div居中
网上其他地方已讲述过对其的不同实现方式,今天主要做一个详细的汇总,希望对大家有帮助. ps:我面试的时候就被问到过这个问题,当时都回答错了,蓝瘦. 假设父div的类名为father,子div的类名为s ...
- 父div高度不能根据子div高度自动变化的解决方案
<div id="parent"> <div id="content"> </div> </div> 当cont ...
- css 实现 左右div 等高, 同时父级div就是最高的子div的高度
原文地址:https://www.cnblogs.com/cbza/p/7145384.html 方法一: 通过父级overflow:hidden, 自己设置padding-bottom 和 mar ...
- 父div高度不能自适应子div高度的解决方案
<div id="parent"><div id="content"> </div></div> 当conten ...
- jQuery滚动广告 解决子div绝对定位与父div重叠引起的闪烁问题
这两天做了一个滚动广告栏的demo 功能有自动轮播 左右箭头移动 导航点选中图片移动效果 模仿的是新浪体育的广告 最难的问题就是子div绝对定位于父div 鼠标移入子div 系统会判定鼠标移出了父di ...
- 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 ...
- CSS+DIV:父DIV相对定位+子DIV绝对定位
如何在一个div内将一个div进行绝对定位呢?很简单,把父div的position属性设为relative,子div的position属性设为absolute就可以了... 示例: <html& ...
- div鼠标悬停,子元素上移,鼠标移出,子元素下移动画。
HTML: <div class="edt_title" > <div id="edt_title"> <p class=&quo ...
- 子div设置浮动无法把父div撑开。
<div class="mainBox"> <div class="leftBox"></div> <div clas ...
随机推荐
- 【C#】截取字符串
几个经常用到的字符串的截取 string str="123abc456"; int i=3; 1 取字符串的前i个字符 str=str.Substring(0,i); // or ...
- nfs使用教程
服务端 配置说明 文件名 /etc/exports 格式 <输出目录> [客户端 (访问权限,用户映射,其他) ] [客户端 (访问权限,用户映射,其他) ] 格式说明 输出目录:NFS系 ...
- es6- Generator函数实现长轮询
1.Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同. 语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态.形式上,Gene ...
- 树状数组 洛谷P3616 富金森林公园
P3616 富金森林公园 题目描述 博艾的富金森林公园里有一个长长的富金山脉,山脉是由一块块巨石并列构成的,编号从1到N.每一个巨石有一个海拔高度.而这个山脉又在一个盆地中,盆地里可能会积水,积水也有 ...
- Jdk升级到11引起的问题:程序包javax.xml.bind.annotation不存在
Jdk12 都发布了, 我也下载一个玩一玩吧.刚准备要下载,发现之前已经下载了一个11, 那就11 吧,也不用太新了. 安装了jdk11,习惯性的设置了一下环境变量: JAVA_HOME=D:\too ...
- Intervals POJ - 1201 差分约束
You are given n closed, integer intervals [ai, bi] and n integers c1, ..., cn. Write a program that: ...
- SVN历史版本比较中文乱码
将Workspace的编码改为UTF-8即可,详见上图:
- Restful 3 -- 序列化组件(GET/PUT/DELETE接口设计)、视图优化组件
一.序列化组件 基于上篇随笔的表结构,通过序列化组件的ModelSerializer设计如下三个接口: GET 127.0.0.1:8000/books/{id} # 获取一条数据,返回值:{} PU ...
- onCreateOptionsMenu
onCreateOptionsMenu----只在Activity创建时调用一次!之后不会再被调用! onPrepareOptionsMenu----每次display menu之前,都會调用该方法, ...
- Unity3D游戏高性能战争迷雾系统实现
一 效果图 先上效果图吧,这是为了吸引到你们的ヽ(。◕‿◕。)ノ゚ 战争迷雾效果演示图 战争迷雾调试界面演示图 由于是gif录制,为了压缩图片,帧率有点低,实际运行时,参数调整好是不会像这样一卡一顿的 ...