Как получить положение перетаскиваемого объекта

Question

Я пытаюсь получить x и y перетаскиваемого объекта с помощью 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>

Теперь я могу получить положение перетаскиваемого объекта, но мне нужно, чтобы он был изменяемого размера, и в дополнение к получению 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 .

Это демо, принесенное вам drag event и методами offset() и text().

<час /> Отредактировано в ответ на комментарий ОП к исходному вопросу:

Дэвид, на самом деле то, что мне нужно, немного сложнее, но ты мог бы оказать большую помощь. То, что я хочу сделать, это поместить перетаскиваемый объект и перетаскиваемое изображение на панель и перетащить перетаскиваемый объект на изображение и получить положение, где оно было отброшено. Мне также нужно, чтобы перетаскиваемый объект был изменяемого размера и в конце получал бы его размер :) спасибо

... э-э, ох ...

Я думаю Этот вид охватывает основы того, что просили:

$('#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 в любом месте , но при перетаскиваемом 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, из вышеперечисленных .

Answer 2

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

$(this).position()

или

$(this).offset()

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

С http://api.jquery.com/position/

Answer 3

Вы можете получить ширину с помощью .resizable () и остановить событие.Попробуйте добавить это:

$('#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());
      }
   });