标签: position

如何获得可拖动对象的位置

我试图获得xy使用jQuery可拖动的对象.

场景是,我将一个对象拖放到另一个对象上,并希望得到拖放对象的位置.

编辑:现在我可以获得对象的位置,但我需要更多:

这是我尝试过的:

<script>
$(function() {
    $('#draggable').draggable({
        drag: function() {
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $(this).text('x: ' + xPos + 'y: ' + yPos);
        }
    });

    $("#droppable").droppable({
        drop: function(event, ui) {
            $(this)
                .addClass("ui-state-highlight")
                .find("p")
                .html("Dropped!");
        }
    });
});
</script>
Run Code Online (Sandbox Code Playgroud)

现在我可以获得可拖动对象的位置,但我需要它可以调整大小,除了获得可拖动对象之外x,y,我还需要它的大小.

jquery drag-and-drop position jquery-ui

29
推荐指数
2
解决办法
8万
查看次数

可可:获取当前鼠标在屏幕上的位置

我需要使用Xcode在Mac上的屏幕上显示鼠标位置.我有一些代码应该这样做,但我总是将x和y返回为0:

void queryPointer()
{

    NSPoint mouseLoc; 
    mouseLoc = [NSEvent mouseLocation]; //get current mouse position

    NSLog(@"Mouse location:");
    NSLog(@"x = %d",  mouseLoc.x);
    NSLog(@"y = %d",  mouseLoc.y);    

}
Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么?你如何获得屏幕上的当前位置?此外,最终该位置(保存在NSPoint中)需要复制到CGPoint以与另一个函数一起使用,因此我需要将其作为x,y坐标或转换它.

mouse cocoa position

28
推荐指数
4
解决办法
3万
查看次数

jQuery UI对话框定位:调整位置顶部20px -

我有一个由ajax调用填充的对话框.我想限制对话框最大高度,并且如果超出此最大高度,也允许它可滚动.下面的代码完全符合我的要求.

美中不足的是我不能移动的顶部从该对话框的顶部位置.我可以左右移动它.我无法使用中心,因为对话框显示在一个大型可滚动窗口中.如果我使用firebug,我可以调整top属性但无法找到它被设置为零的位置.

$("#your-dialog-id").dialog({
    open: function(event, ui) {
        $(this).css({'max-height': 500, 'overflow-y': 'auto'});
    },
    autoOpen:false,
    modal: true,
    resizable: false,
    draggable: false,
    width: '690',
    closeOnEscape: true,
    position: 'top'
});
Run Code Online (Sandbox Code Playgroud)

我想调整对话框的y位置,使其距窗口顶部20px.知道我能做什么吗?

dialog position jquery-ui

28
推荐指数
3
解决办法
7万
查看次数

CSS位置元素在滚动容器内"固定"

我想知道是否有人为此找到了解决方案?

我正在寻找一个解决方案,将元素附加到滚动容器的顶部

HTML:

<div class="container">
  <div class="header">title</div>
  <div class="element">......</div>
  ... (about 10-20 elements) ...
  <div class="element">......</div> 
</div>
Run Code Online (Sandbox Code Playgroud)

所有"元素"都有position:relative,

容器有以下CSS:

.container {
  position:relative;
  width:200px;
  height:400px;
  overflow-y:scroll;
}
Run Code Online (Sandbox Code Playgroud)

我希望标题保持在容器的顶部,独立于其滚动位置和滚动在下面的元素.

到目前为止的CSS:

.header {
  position:absolute; /* scrolling out of view :-( */
  z-index:2;
  background-color:#fff;
}
.element{
  position: relative;
}
Run Code Online (Sandbox Code Playgroud)

所有元素都是块元素,我不能将标题移动到容器之外.jquery在这一点上是没有选择的.

html css position

28
推荐指数
4
解决办法
5万
查看次数

断开容器外的元素

我将所有内容包装在具有固定宽度的容器元素中.

但我有一个<div>我想要"突破"该容器以跨越页面的整个宽度.

http://dabblet.com/gist/3207168

在此输入图像描述

正如你在那个例子中看到的那样,我已经有了<div>突破,但由于它绝对定位,它不会影响页面的流程......这就是我想要它做的.

我希望它在页面流中表现得像它,但扩展窗口的整个宽度.

html css position

28
推荐指数
2
解决办法
3万
查看次数

CSS:位置加载指示器位于屏幕中央

如何将加载指示器放在屏幕中央.目前我正在使用一个小占位符,它似乎工作正常.但是,当我向下滚动时,加载指示器保持在该预定位置.如何让它跟随滚动,以便始终位于顶部?

#busy
{
    position: absolute;
    left: 50%;
    top: 35%;
    display: none;
    background: transparent url("../images/loading-big.gif");
    z-index: 1000;
    height: 31px;
    width: 31px;
}

#busy-holder
{
    background: transparent;
    width: 100%;
    height: 100%;        
}
Run Code Online (Sandbox Code Playgroud)

css position center

27
推荐指数
4
解决办法
8万
查看次数

firefox位置绝对在一个相对容器问题里面

我使用表来显示我动态生成的数据取决于用户输入html结构如下所示:

<table>
<tr>
    <td>.....</td>
    <td>.....</td>
    <td style="position:relative;"> //like this i set for all td in table
     <div style="position:absolute">//like this i set for all div in table
     <contents>
     </div>
   </td>
   <td>.....</td>
   <td>.....</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)

这里的div是到了body的顶角.所有这些上面的样式都应用于javascript和它在chrome,IE中的工作正常,但不在FF中,如下图所示.

在此输入图像描述

如果我们将div的位置更改为绝对到相对它将正确对齐,但我做一个悬停效果,而用户悬停div的位置是重要的,这个问题只发生在firefox

为了您的快速参考,请查看jquery http://www.malsup.com/jquery/hoverpulse/

我需要这样必须在FIREFOX表中实现,这意味着

  • 每个图像放在一个td内//<td style="position:relative;">

  • 如果用户将鼠标悬停在td上,则图像应该脉冲(缩放效果).

  • 当用户将鼠标悬停时,它应该进入之前的状态.(正常大小)

表格结构已在上面给出.

html firefox position

27
推荐指数
3
解决办法
3万
查看次数

Android canvas drawText文本的y位置

我正在使用Canvas创建一个带有一些背景和一些文本的Drawable.drawable用作EditText内的复合drawable.

文本是通过画布上的drawText()绘制的,但在某些情况下,我确实遇到了绘制文本的y位置问题.在这些情况下,某些字符的部分被截断(参见图像链接).

没有定位问题的字符:

http://i50.tinypic.com/zkpu1l.jpg

有定位问题的字符,文字包含'g','j','q'等:

http://i45.tinypic.com/vrqxja.jpg

您可以找到一个代码段来重现下面的问题.

有没有专家知道如何确定y位置的正确偏移量?

public void writeTestBitmap(String text, String fileName) {
   // font size
   float fontSize = new EditText(this.getContext()).getTextSize();
   fontSize+=fontSize*0.2f;
   // paint to write text with
   Paint paint = new Paint(); 
   paint.setStyle(Style.FILL);  
   paint.setColor(Color.DKGRAY);
   paint.setAntiAlias(true);
   paint.setTypeface(Typeface.SERIF);
   paint.setTextSize((int)fontSize);
   // min. rect of text
   Rect textBounds = new Rect();
   paint.getTextBounds(text, 0, text.length(), textBounds);
   // create bitmap for text
   Bitmap bm = Bitmap.createBitmap(textBounds.width(), textBounds.height(), Bitmap.Config.ARGB_8888);
   // canvas
   Canvas canvas = new Canvas(bm);
   canvas.drawARGB(255, 0, 255, 0);// for visualization
   // y …
Run Code Online (Sandbox Code Playgroud)

android text position canvas drawtext

27
推荐指数
2
解决办法
3万
查看次数

将div扩展到页面底部(仅限HTML和CSS)

这是一个非常简单的问题,但我似乎无法在网上找到合适的解决方案.我希望在自然流中有一个元素列表,最后一个元素扩展到页面底部.所以,如果我有

<div id="top" style="height:50px;"></div>
<div id="bottom" style="background:lightgrey;"></div>
Run Code Online (Sandbox Code Playgroud)

我需要元素bottom从页面的底部延伸top到底部.任何只使用html和css的解决方案都是受欢迎的,你可以添加容器div或任何东西,只要我可以动态调整bottomdiv的大小

编辑:我不想硬编码任何值bottom,因为我想bottom调整是否top调整大小

这里有一个小提琴,满足您所有的需求:http://jsfiddle.net/8QnLA/

html css position

27
推荐指数
1
解决办法
4万
查看次数

CSS定位绝对元素,自动宽度超出父边界?

所以,我将我的父元素定位为相对,以便允许工具提示元素在其顶部位于绝对内部.我知道你需要添加"left:0,right:0",这样元素的宽度仍然可以设置为auto,我已经完成了.但是,我的父元素有一个固定的宽度,工具提示被限制,因此自动宽度不能超出它,是否有任何解决方法?

CSS:

.parent {
  position: relative;
  width: 100px;
  height: 100px;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  width: auto;
  padding: 5px 10px;
}
Run Code Online (Sandbox Code Playgroud)

内容:

<div class="parent">
  <div class="tooltip">Text goes here</div>
</div>
Run Code Online (Sandbox Code Playgroud)

请不要JS,寻找CSS解决方案,谢谢!

html css position css3

27
推荐指数
3
解决办法
3万
查看次数

标签 统计

position ×10

css ×5

html ×5

jquery-ui ×2

android ×1

canvas ×1

center ×1

cocoa ×1

css3 ×1

dialog ×1

drag-and-drop ×1

drawtext ×1

firefox ×1

jquery ×1

mouse ×1

text ×1