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

Question

我正在尝试使用 jQuery 获取可拖动对象的 x 和 y。

场景是，我正在将一个对象拖放到另一个对象上，并且想要获取拖放对象的位置。

编辑：现在我可以得到对象的位置，但我需要更多：

这是我尝试过的：

<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>

现在我可以获取可拖动对象的位置，但我需要它可以调整大小，除了获取可拖动对象的x,y，我还需要它的大小。

Answer 1

您可以使用drag 事件：

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

JS Fiddle demo.

这个demo由drag event，方法offset()和text()为大家带来。

---

编辑以回应 OP 对原始问题的评论：

大卫，实际上我需要的有点复杂，但你可能会帮上大忙。我想要做的是将一个可拖动对象和一个可放置图像放在面板中，然后将可拖动对象拖动到图像上并获取它被放置的位置。我还需要可拖动对象可调整大小并在最后获得它的大小:) 谢谢

...呃，哇...

我认为这种涵盖了所要求内容的基础知识：

$('#dragThis').draggable( {
    containment: $('body'),
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    },
    stop: function() {
        var finalOffset = $(this).offset();
        var finalxPos = finalOffset.left;
        var finalyPos = finalOffset.top;

        $('#finalX').text('Final X: ' + finalxPos);
        $('#finalY').text('Final X: ' + finalyPos);
    },
    revert: 'invalid'
});

$('#dropHere').droppable({
    accept: '#dragThis',
    over: function() {
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 500);
        $('#dragThis').draggable('option', 'containment', $(this));
    }
});

Updated JS Fiddle demo.

Newly-updated JS Fiddle demo, featuring revert: invalid，因此将可拖动的 div 放置在任何位置但可放置的 div 将导致可拖动的动画返回到其起始位置。如果那将不胜感激。或者根本不需要...

为了解决draggable 对象也为resizable 的要求，我认为这是不可能的，因为draggable() 和resizable() 都响应相同 互动。以某种方式这可能是可能的，但恐怕目前超出了我的理解范围。

---

编辑以添加“高度/宽度”要求，并整理一些内容并改进 CSS。也就是说：

HTML：

<div id="dragThis">
    <ul>
        <li id="posX">x: <span></span></li>
        <li id="posY">y: <span></span></li>
        <li id="finalX">Final X: <span></span></li>
        <li id="finalY">Final Y: <span></span></li>
        <li id="width">Width: <span></span></li>
        <li id="height">Height: <span></span></li>
    </ul>
</div>

<div id="dropHere"></div>

CSS：

#dragThis {
    width: 8em;
    height: 8em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.5);
}

#dragThis span {
    float: right;
}

#dragThis span:after {
    content: "px";
}

li {
    clear: both;
    border-bottom: 1px solid #ccc;
    line-height: 1.2em;
}

#dropHere {
    width: 12em;
    height: 12em;
    padding: 0.5em;
    border: 3px solid #f90;
    border-radius: 1em;
    margin: 0 auto;
}

jQuery:

$('#dragThis').draggable({
    containment: $('body'),
    drag: function() {
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX > span').text(xPos);
        $('#posY > span').text(yPos);
    },
    stop: function() {
        var finalOffset = $(this).offset();
        var finalxPos = finalOffset.left;
        var finalyPos = finalOffset.top;

        $('#finalX > span').text(finalxPos);
        $('#finalY > span').text(finalyPos);
        $('#width > span').text($(this).width());
        $('#height > span').text($(this).height());
    },
    revert: 'invalid'
});

$('#dropHere').droppable({
    accept: '#dragThis',
    over: function() {
        $(this).animate({
            'border-width': '5px',
            'border-color': '#0f0'
        }, 500);
        $('#dragThis').draggable('option', 'containment', $(this));
    }
});

JS Fiddle demo, of the above.

Answer 2

您可以尝试以下方法之一：

$(this).position()

或

$(this).offset()

.position() 方法允许我们检索元素相对于偏移父元素的当前位置。将此与 .offset() 进行对比，后者检索相对于文档的当前位置。

来自http://api.jquery.com/position/

Answer 3

您可以使用 .resizable() 和 stop 事件获取宽度输出。尝试添加：

$('#dragThis').resizable({ handles: "e, w",      
      stop: function(event, ui) {
        var width = ui.size.width;
        var height = ui.size.height;
    $('#width > span').text($(this).width());
    $('#height > span').text($(this).height());
      }
   });