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

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。

这个演示由drag event和方法offset()和text()带给你。

---

Edited in response to comment from OP, to original question:

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

......呃，哇......

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

$('#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/检索相对于文档的当前位置。

来自

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

Answer 3

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

qazxswpoi