今天遇到了一个问题,是这样的,有一个div盒子,实现盒子居中,居中的样式是这样的见下

#box{
width:300px;
height:150px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:#333;
border:2px solid #ccc;
}

上述样式是可以实现样式居中的,问题是我拖曳div盒子不能到右边界和下边界,但是能想左边界和右边界移出盒子的宽高的一半。不知原因在什么地方。

后来,将居中的样式修改了下,就可以了。具体如下:

#box{
width:300px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -150px;
background:#333;
border:2px solid #ccc;
}

在用JS操作时,就可以实现拖拽的功能了,而且能够到右边界和下边界。 

但原因还不是特别清楚。 

JavaScript 拖曳和居中问题的更多相关文章

  1. LODOP打印超文本有边距不居中的情况2

    之前的博文:LODOP打印项水平居中.之前的博文有介绍超文本和纯文本的居中方式,设置超文本打印项居中时,注意打印内容要在打印项本身宽度里居中.之前的博文超文本用的是个表格,而且表格本身没有margin ...

  2. Web开发框架之权限管理系统

    Web开发框架之权限管理系统 记得我在很早之前,开始介绍我的Winform开发框架和我的WCF开发框架之初,我曾经给出下面的视图,介绍我整理的一个框架体系,其中包含有WInform开发框架以及我的We ...

  3. javascript实现拖曳与拖放图片

    javascript实现拖曳与拖放图片 其实对于drag和drop拖曳与拖放事件IE很早以前就支持这个操作了,我们先来看看HTML5中新增的拖放API. 在HTML5中想要实现拖放操作,至少要做以下操 ...

  4. 第一百四十六节,JavaScript,百度分享保持居中--下拉菜单

    JavaScript,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...

  5. javascript关闭弹出窗体时刷新父窗体和居中显示弹出窗

    居中显示用到了moveTO()方法: 关闭弹出窗时刷新父窗体用到了window.opener方法: 父窗体代码例如以下: <%@ Page Language="C#" Aut ...

  6. 《JavaScript网页特效经典300例》

    <JavaScript网页特效经典300例> 基本信息 作者: 杨磊    张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...

  7. javascript运动学教程

    本文系笔者学习原生javascript动效的笔记.内容基于某非著名培训机构的视频教程.并重新做了归类整理.删除了一些过时的内容.并重做了GIF图,加上了自己的一些分析. 一. 运动学基础 引子:从左到 ...

  8. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. JavaScript : 零基础打造自己的类库

    写作不易,转载请注明出处,谢谢. 文章类别:Javascript基础(面向初学者) 前言 在之前的章节中,我们已经不依赖jQuery,单纯地用JavaScript封装了很多方法,这个时候,你一定会想, ...

随机推荐

  1. 深入理解PHP类的自动载入机制方法

    第一种情况:文件A.php中内容如下 <?phpclass A{ public function __construct(){ echo 'fff'; }}?> 文件C.php 中内容如下 ...

  2. Vue Router 相关

    1. 路由传参: 编程式的导航 router.push this.$router.push("home"); this.$router.push({ name: 'news', p ...

  3. 阿里云杨敬宇:5G时代,边缘计算将发挥更大价值

    “5G时代,边缘计算将发挥更大价值.”3月8日,阿里云边缘计算技术负责人杨敬宇向媒体表示,边缘计算作为5G时代的一项关键技术,未来将成为不可或缺的基础设施之一. 5G时代万物智联将真正成为现实,但对计 ...

  4. Poj 1182种类(带权)并查集

    题目链接 食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 44316 Accepted: 12934 Descriptio ...

  5. 学习String类

    1. 描述: String类是java中比较常用的类, 表示字符串类型 当拼接大量数据时, String类性能没有StringBuilder和StringBuffer性能高 2. 常用的String语 ...

  6. Docker.[4].容器操作.

    Docker.[4].容器操作. 熟悉的指令: 启动容器 docker run 交互式启动容器 docker run -i -t IMAGENAME /bin/bash 停止容器 exit 停止容器 ...

  7. 2019-1-17-一段能让-VisualStudio-炸掉的代码

    title author date CreateTime categories 一段能让 VisualStudio 炸掉的代码 lindexi 2019-01-17 09:55:29 +0800 20 ...

  8. 《2019年上半年Web应用安全报告》发布:90%以上攻击流量来源于扫描器,IP身份不再可信

    Web应用安全依然是互联网安全的最大威胁来源之一,除了传统的网页和APP,API和各种小程序也作为新的流量入口快速崛起,更多的流量入口和更易用的调用方式在提高web应用开发效率的同时也带来了更多和更复 ...

  9. python字典排序取最值总结

    dic = {"abc":18,"adc":19,"abe":20} # 默认对键排序,从小到大,返回排序后键组成的列表 zidian = ...

  10. python 临时修改模块搜索路径