以负边距居中的JQuery可拖动DIV...问题
以负边距居中的JQuery可拖动DIV是一种使用jQuery库实现的可拖动的DIV元素，并通过负边距的方式使其居中显示。
具体实现步骤如下：
- 引入jQuery库：在HTML文件中引入jQuery库的CDN链接或本地文件。
- 创建HTML结构：在HTML文件中创建一个DIV元素，设置其id属性为"draggableDiv"，并设置其样式为固定定位（position: fixed;）。
- 编写JavaScript代码：使用jQuery的draggable()方法使DIV元素可拖动，并使用css()方法设置负边距使其居中。
$(document).ready(function() {
$("#draggableDiv").draggable();
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var divWidth = $("#draggableDiv").width();
var divHeight = $("#draggableDiv").height();
var leftPos = (windowWidth - divWidth) / 2;
var topPos = (windowHeight - divHeight) / 2;
$("#draggableDiv").css({
"left": leftPos,
"top": topPos
});
});在上述代码中，首先使用draggable()方法使DIV元素可拖动。然后，通过获取窗口的宽度和高度以及DIV元素的宽度和高度，计算出使DIV元素居中的左边距和上边距，并使用css()方法设置DIV元素的样式。
应用场景：
- 可用于创建可拖动的面板、窗口或对话框等用户界面元素。
- 可用于实现拖拽排序功能，例如拖拽调整列表项的顺序。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙：https://cloud.tencent.com/product/vr
- 更多腾讯云产品请参考腾讯云官网：https://cloud.tencent.com/
相关·内容
2回答
Div应该在中间点按一下
javascript、jquery、html、css
我在jquery中并不完美，我的代码中有一个问题。在这段代码中，我有4个div固定高度和宽度。问题是，当我单击任何div时，单击的div应该位于中间(水平和垂直)。
这是我的code>
$(document).ready(function(){
$('.col').click(function(){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var divWidth = $(".col")
浏览 6提问于2014-09-11得票数 2
回答已采纳
3回答
jquery弹出菜单find true top
jquery、popup、height
我有一个jquery弹出窗口脚本，要在屏幕上居中显示弹出窗口，代码如下：
function centerPopup(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(".popupContent").height();
var popupWidth = $(".popupContent").width();
$("
浏览 1提问于2012-03-23得票数 2
1回答
jQuery UI可拖动:拖动比容器大的div
javascript、jquery、html、css、jquery-ui
当我遇到一个问题时，我正在使用jQuery UI拖放元素。我希望能够拖动一个比容器大的div元素。因此，我尝试使用位置:容器上的相对位置和可拖放元素的绝对位置，但它不起作用。基本上，我想要实现的是：
您可以查看下面的代码示例：
我的代码：
外部
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
CSS
.draggabl
浏览 0提问于2014-09-04得票数 3
回答已采纳
2回答
在开始拖动时设置可拖动对象的高度时，无法将其连接到空可排序对象
javascript、html、jquery、jquery-ui
我有一个draggable和两个空的可排序元素。通过使用connectWithSortable，我应该能够将可拖动元素连接到可排序元素。 但是，当可拖动元素第一次被拖到可排序元素中时，它不会连接到该元素。只有在第二次拖动时，它才会连接。 如果我使用CSS将可排序元素的高度设置为100px，那么它是有效的：https://jsfiddle.net/cekwuyq1/ 但是，如果在开始拖动时将可排序元素的高度设置为100px (我正在执行此操作)，则会出现问题：https://jsfiddle.net/v9y0L2n1/ $(".sortable").sortable();
浏览 15提问于2020-07-29得票数 0
回答已采纳
5回答
未知大小的图像如何在已知大小的div内居中？
html、css、image
我试图在已知大小的div中对未知大小的图像进行居中，使图像在div内垂直和水平地居中，并且图像的高宽比不被扭曲。
这是一个
这段代码几乎完成了任务，但是这两个图像看起来都稍微向下移动了.可能有几个像素。为什么？
HTML；
<body>
<div class="container" id="c1">
<img src="test.jpg"/>
</div>
<div class="container" id="c2">
<
浏览 8提问于2010-11-28得票数 1
3回答
尝试在任何浏览器上居中显示内容
html、css
我有下面的超文本标记语言和CSS这里。我正在尝试将我所有的内容放在任何屏幕大小/浏览器的中心。目前，在我可以测试的所有屏幕上，所有东西都偏离中心并向左偏了一点。这是我的CSS ( HTML和CSS都在jsfiddle链接中)：
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
html{
/* font-family: 'Roboto Condensed', sans-serif;*/
font-family: "HelveticaNeue-Ligh
浏览 0提问于2014-02-09得票数 0
1回答
如何使对象占另一个对象宽度的百分比
javascript、jquery、height、width
我正在尝试放置3div来填充窗口的宽度，并且它们的width会根据窗口的大小而变化。然而，javascript似乎给出的窗口宽度比实际要大，导致对象从窗口流出，导致滚动。您可以在这里看到我的完整代码：
这是javascript：
$(window).resize( setDim());
function setDim() {
var windowWidth = $(window).innerWidth()- 3; //the 3 is for the 1px margin between the divs
var windowHeight = $(window).innerH
浏览 0提问于2015-04-29得票数 0
回答已采纳
2回答
jquery动画和使div居中
jquery
当div逐渐淡出时，我想让它居中。请检查代码，并告诉我需要做哪些更改才能使其正确。
这是实现url的，这是代码。
var grower = $('.grower');
var flag=0;
$('.click').click(function(){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var left = windowWidth/2 - 150;
var top = windowHeight/2 - 150;
浏览 1提问于2012-01-20得票数 1
回答已采纳
3回答
脚本只有最后的文字和最后的颜色，但是动画的指示，是怎么回事？
javascript、jquery、html、css
我可以像我想的那样在div周围移动文本，但是我希望它是不同的颜色，在运动的不同部分有不同的文本/颜色，但是它只是调用最终的文本和颜色。'slow'部分的jQuery函数似乎只为运动的第一部分触发。
我做错了什么？
HTML：
<button id="button">Go!</button>
<br>
<br>
<br>
<br>
<div id="container">
<div id="demo">Hello World&l
浏览 5提问于2015-10-16得票数 0
回答已采纳
3回答
如何使用jQuery将DIV置于页面的中心位置？
jquery、html、center
我需要使用jquery将一个DIV放在页面的正中心。我的DIV CSS样式如下所示：
#page-content #center-box{
position:absolute;
width:400px;
height:500px;
background:#C0C0C0;
border:1px solid #000;
}
我的居中jQuery如下：
windowheight = $(window).height();
windowwidth = $(window).width();
pagecenterW = windowwidth/2;
pagecenterH = windowhe
浏览 0提问于2010-04-08得票数 1
回答已采纳
1回答
我使用jquery tabSlideOut滑块，它运行得很好，但是我需要将它放在页面的任何位置，但是没有这种类型的工具。只有一个属性可用，如tabLocation：“左”
$(function () {
$('.slide-out-div').show();
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your
浏览 0提问于2011-08-12得票数 0
2回答
水平中心拖曳模态的实现
css、jquery-ui-draggable
我有一个弹出式窗口，应该是position:fixed和可拖动的。问题是，每当窗口弹出时，它就使用css转换，因此它的所有属性都是动画的。我尝试过使用left:50% transformX:(-50%)对其进行水平居中，但是当它出现时弹出窗口会水平跳跃(因为它将转换动画化)。我也尝试用左:0，右:0，边距:0自动对齐，但是当你开始拖动时，窗口也跳出了位置。这些问题只有在窗口第一次出现或第一次拖动时才会出现，在第一次拖动之后，一切都按预期的方式工作。
我将下列选项传递给可拖式设置器。
elem.draggable({ start: function() {
$(this).css({trans
浏览 1提问于2016-01-17得票数 1
回答已采纳
4回答
jQuery不会通过调整视口大小来改变背景图像的大小
jquery、css
我正在处理一个带有背景图像的全屏幕元素，但它的工作方式并不是我想要的那样。我希望全屏背景图像调整大小和居中。我做错了什么？
编辑:我想要一个具有与浏览器视图相同大小的背景图像的intro div元素。经过大量搜索后，我发现我必须使用viewport单元或javascript才能使其工作。这里有一个链接，我想怎么做：对不起，如果我的问题是不清楚的！
jQuery代码
jQuery(document).ready(function ($) {
fullscreen();
$(window).resize(function () {
fullscreen();
浏览 8提问于2015-08-10得票数 1
回答已采纳
1回答
当浏览器调整大小时，将元素保存在父视图中。
javascript、jquery、html、css、jquery-ui
编辑
困扰我的是，如果你把div一直拖到右下角，那么浏览器的尺寸就会变大，div不会出现在它的父视图中，直到你实际拖动它。一旦你拖动它，它就会在它的父母视图中重新抓取。
在您调整浏览器的大小之后，我如何使div保持在它的父视图中？
请参阅代码片段。
旧式
我有一个div，它可以通过JQuery UI拖动。我希望它的位置有一个百分比值。这样，当您调整浏览器的大小时，div将相对地、或者成比例地位于相同的位置。
我查看了，并按照它说的做了。当我输出左边和顶部位置时，数字不准确。当我将div拖到右下角时，它会给出以下输出：
66.55518394648828%
92.71255060
浏览 1提问于2015-12-04得票数 3
回答已采纳
2回答
jquery弹出窗口位置firefox问题
jquery、popup
我有一个jquery弹出窗口脚本在我的网站上。它在chrome中运行良好，但在firefox中，当窗口打开时，它就会出现在顶部，我希望它在垂直方向上更居中。例如：
________________________
| | | |
| | popup | |
| | | |
| |___________| |
| |
|_______________________|
Popup.js中的脚本：
function centerPopup()
浏览 0提问于2012-07-10得票数 0
1回答
从数据库中获取数据并在拖放中使用它
javascript、php、mysql
我已经为drag n drop创建了一个页面，其中的元素被克隆到可拖动的空间中，然后存储在数据库中。我存储id、height、width、x_pos和y_pos。所有这些工作都在.js文件中完成。我应该如何检索javascript page n中的数据检查以前是否删除了元素。当我重新加载页面时，它从头开始，意味着要拖动元素。有没有人能给出一些想法。
// JavaScript Document
$(document).ready(function () {
var x = null;
//Make element draggable
$(".drag
浏览 2提问于2016-04-09得票数 0
2回答
jquery如何在删除页边距时保留位置
javascript、jquery、css、jquery-ui、margin
我四处打探，找不到这个问题，如果我错过了，请给我指出正确的方向。
目的：我正在为我们的网站创建一个统计报告系统。当您第一次访问它时，它有一个带有总体统计信息的仪表板类型的布局，以及相应的图表。我想要这样做，以便每个单独的统计数据/图表集可以在您认为合适的情况下在页面周围移动，尽管它最初是从中间开始的，除非您移动它。为此，我使用jQuery和jQuery UI。
问题:对于初始视图，使用margin: 0 auto在页面上对div进行居中。我遇到的第一个问题是，当你拖动它的时候，你不能把它拖到左边，因为它上的空白处。我使用draggable事件属性start:从div中删除margin属性。这解
浏览 4提问于2015-07-22得票数 2
回答已采纳
2回答
使随机定位的div不与彼此和侧栏重叠。
javascript、jquery
我正在制作一个商店页面，其中不同的产品是div元素，其位置在页面加载时随机使用以下jQuery：
var docHeight = $(document).height(),
docWidth = $(document).width(),
$div = $('#div'),
divWidth = $div.width(),
divHeight = $div.height(),
heightMax = docHeight - divHeight,
widthMax = docWidth - divWidth;
$div.css ({
left: Math.floor( M
浏览 5提问于2016-07-04得票数 2
2回答
将div动画到中心的jQuery
jquery
我试图在视图端口底部创建一个横幅，在页面加载时从右边(屏幕外)动画到中心。我正在测量窗口的高度，并减去横幅的高度，把它放在屏幕上的正确高度与静态定位。然后，我尝试将横幅居中，使其具有自动保证金。
目前，所有的jQuery似乎都不起作用。
Jsfiddle：
$(window).load(function () {
var windowHeight = $(window).height();
var bannerHeight = windowHeight - 80 + "px";
$('.create_banner').css({
position
浏览 2提问于2014-02-06得票数 0
回答已采纳
2回答
拖放div正在创建更多div。
javascript、jquery、html、jquery-ui
我试图拖动一些.draggable div，然后插入.droppable div。
我有一个工作示例()，但我有两个问题：
第一个问题:当我拖动一个.draggable div并在.droppable div中放置时，.draggable div不会停留在我放置的位置，它总是在div的左边对齐。(我认为这是因为附件()，但不知道如何解决这个问题)
第二期:我想拖动我放在里面的div。可下垂的div，但是当我这样做时，每次我在.droppable中拖动一个div时，它就会再创建一个.draggable div。
你能帮我把这件事做好吗？
jQuery：
$(function () {
$
浏览 5提问于2015-12-01得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
