今天遇到了一个问题,是这样的,有一个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. 第一次接触node.JS

    1.初识node.js node.js平时可以关注: 一.nodejs.org看看nodejs的版本升级,新特性的加入,重要bug的修复等 二.www.npmjs.com模块社区,看他人源代码,省力 ...

  2. nested exception is org.hibernate.MappingException解决方案

    1.可能是因为映射文件( Order.hbm.xm)配置的class路径出错 <hibernate-mapping> <class name="com.web.bean.O ...

  3. web App libraries跟referenced libraries的一些问题

    该博文内容经参看网上其他资料归纳所成,并注明出处: 问题一:myeclipse中Web App Libraries无法自动识别lib下的jar包(http://blog.csdn.net/tianca ...

  4. 转搞定python多线程和多进程

    转自https://www.cnblogs.com/whatisfantasy/p/6440585.html 1 概念梳理: 1.1 线程 1.1.1 什么是线程 线程是操作系统能够进行运算调度的最小 ...

  5. SpringMVC代码复制版

    Lib目录 Java目录 HelloController文件代码 import org.springframework.web.servlet.ModelAndView; import org.spr ...

  6. Docker的asp.net core应用部署系列——docker pull 加速

    原文:Docker的asp.net core应用部署系列--docker pull 加速 版权声明:本文为博主原创文章,随意转载. https://blog.csdn.net/Michel4Liu/a ...

  7. Java.控制层.响应工具类.

    Java.控制层.响应工具类. package cn.com.spdbccc.cds.index.web.base; public class ApiResponse { private int co ...

  8. 记UWP开发——多线程操作/并发操作中的坑

    一切都要从新版风车动漫UWP的图片缓存功能说起. 起因便是风车动漫官网的番剧更新都很慢,所以图片更新也非常慢.在开发新版的过程中,我很简单就想到了图片多次重复下载导致的资源浪费问题. 所以我给app加 ...

  9. 剑指offer 1-6

    1. 二维数组中的查找 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数.   分析 ...

  10. Directx11教程(51) 简单的billboard

    原文:Directx11教程(51) 简单的billboard        billboard称作公告板,通常用一个quad(四边形)表示[有的billboard用两个正交的quad表示],它的特点 ...