Как получить позицию перетаскиваемого объекта

Я пытаюсь получить x и y объекта draggable с помощью JQuery.

Сценарий: я перетаскиваю объект на другой объект и хочу получить позицию объекта drag & drop. Изменить: теперь я могу получить позицию объекта, но мне нужно больше:

Вот что я пробовал:

<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 перетаскиваемого, мне также нужен его размер.

Любая помощь будет замечательной!

Спасибо.

Ответ 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.

Эта демонстрация принесла вам 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));
        }
    });

Обновленная демонстрация JS Fiddle.

Недавно обновленная демонстрация JS Fiddle с изображением revert: invalid, поэтому отбрасывание перетаскиваемого div в любом месте, но divppable 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 из приведенного выше.

Ответ 2

Вы можете попробовать один из них:

$(this).position()

или

$(this).offset()

Метод .position() позволяет нам получить текущую позицию элемента относительно родителя смещения. Контрастируйте это с помощью .offset(), который извлекает текущую позицию относительно документа.

Из http://api.jquery.com/position/