多个 jQuery UI 元素的 X 和 Y 位置答案

【问题标题】：X and Y Positions of multiple jQuery UI Elements多个 jQuery UI 元素的 X 和 Y 位置
【发布时间】：2013-06-25 09:34:31
【问题描述】：

我正在尝试使用 jQuery UI 收集多个可拖动元素的位置。

目前我可以获得一个元素的位置，但是当我移动另一个元素时，两个位置都会改变。

请有人帮助我获取多个可拖动项目的单独位置。

http://codepen.io/anon/pen/nLGIl

HTML

<div class="dragThis" id="box-1"style="top: 100px; left: 50px;" >
  <h2>Test 1</h2>
  <p>This is a test</p>
  <ul>
    <li class="posX"></li>
    <li class="posY"></li>
  </ul>
</div>

<div class="dragThis" id="box-1" style="top: 50px; left: 100px;" >
  <h2>Test 2</h2>
  <p>This is a test</p>
  <ul>
    <li class="posX"></li>
    <li class="posY"></li>
  </ul>
</div>

CSS

.dragThis {
    min-width: 50px;
    max-width: 300px;
    min-height: 50px;
    max-height: 400px;
    overflow: auto;
    padding: 10px;

    background: #efefef;
    border: 3px solid #ccc;
    border-radius: 10px;

    display: inline-block;

    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}

.dragThis h2 {
    font-size: 20px;
    margin: 0;
    padding: 0;
}

.dragThis ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.top {z-index: 2; position: relative}
.bottom {z-index: 1; position: relative}

$(document).ready(function() {
    var a = 3;

    $('.dragThis').draggable(
    {
        start: function(){
            $(this).css("z-index", a++);
        },
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('.posX').text('x: ' + xPos);
            $('.posY').text('y: ' + yPos);
        }
    });

    $('.dragThis').click(function(){
      $(this).addClass('top').removeClass('bottom');

        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });

});

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-draggable

【解决方案1】：

首先，Double ID 不好...... box-1 和 box-2 更好：

您正在将所有元素与类 '.posX' 等匹配。试试这个：

$(document).ready(function() {
    var a = 3;

    $('.dragThis').draggable(
    {
        start: function(){
            $(this).css("z-index", a++);
        },
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $(this).find('.posX').text('x: ' + xPos);
            $(this).find('.posY').text('y: ' + yPos);
        }
    });

    $('.dragThis').click(function(){
      $(this).addClass('top').removeClass('bottom');

        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);
    });

});

【讨论】：

【解决方案2】：

$('.posX', this).text('x: ' + xPos);
$('.posY', this).text('y: ' + yPos);

而不是

$('.posX').text('x: ' + xPos);
$('.posY').text('y: ' + yPos);

示例 - http://codepen.io/anon/pen/yKvcB

【讨论】：

【解决方案3】：

通过这样做$('.posX')，当您只需要活动框上的元素时，您已经选择了具有此类的所有元素，因此代码将如下所示：

$(this).find('.posX').text('x: ' + xPos);
$(this).find('.posY').text('y: ' + yPos);

演示：http://codepen.io/anon/pen/FpCtu

【讨论】：