jQuery 如何获取可拖动对象的位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4903530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the position of a draggable object
提问by Pabuc
I'm trying to get the xand yof the draggable object using jQuery.
我正在尝试使用 jQuery获取可拖动对象的x和y。
The scenario is, I'm dragging and dropping an object onto another object and want to get the position of the drag & drop object.
场景是，我将一个对象拖放到另一个对象上，并希望获得拖放对象的位置。
Edit: Now I can get the position of the object but I need more:
编辑：现在我可以获得对象的位置，但我需要更多：
Here is what I've tried:
这是我尝试过的：
<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>
Now I can get the position of the draggable object but I need it to be resizable and in addition to getting x,yof the draggable, I also need the size of it.
现在我可以获得可拖动对象的位置，但我需要调整它的大小，除了获取可拖动对象之外x,y，我还需要它的大小。
回答by David says reinstate Monica
You can use the dragevent:
您可以使用该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);
}
});
This demo brought to you by the drag event, and the methods offset()and text().
本演示由drag event、方法offset()和text().
Edited编辑以回应 OP 的评论，对原始问题：
David, actually what I need is a bit more complicated but you might do great help. What I want to do is to put a draggable object and a droppable image in a panel and drag the draggable object on the image and get the position of where it was dropped. I'll also need the draggable object to be resizable and get the size of it at the end too :) thank you
大卫，实际上我需要的有点复杂，但你可能会提供很大帮助。我想要做的是在面板中放置一个可拖动对象和一个可放置图像，然后将可拖动对象拖动到图像上并获取其放置位置。我还需要可拖动对象可以调整大小并在最后获得它的大小:) 谢谢
...uh, whoah...
……呃，哇……
I thinkthis sort of covers the basics of what's asked for:
我认为这种涵盖了所要求的基础知识：
$('#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));
}
});
Newly-updated JS Fiddle demo, featuring revert: invalid, so dropping the draggable div anywhere butthe droppable div will cause the draggable to animate back to its starting position. If that'd be appreciated. Or desired at all...
最近更新的JS小提琴演示，特色revert: invalid，所以下降的可拖动DIV的任何地方，但可放开股利将导致拖动动画回到它的起始位置。如果那将不胜感激。或者根本不想要......
To address the requirement for the draggableobject to be resizableas well, I don't think that this is possible, since both draggable()and resizable()respond to the sameinteraction. It may be possible, in some way, but it's currently beyond my ken, I'm afraid.
为了解决对需求draggable对象进行resizable为好，我不认为这是可能的，因为这两个draggable()和resizable()响应的同一互动。从某种意义上说，这可能是可能的，但恐怕目前超出了我的能力范围。
Editedto add in the 'height/width' requirement, and also to tidy up a few things and improve the CSS. That said:
编辑添加了“高度/宽度”要求，并整理了一些东西并改进了 CSS。那说：
HTML:
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:
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:
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));
}
});
回答by user603881
You can try one of these:
您可以尝试以下方法之一：
$(this).position()
or
或者
$(this).offset()
The .position()method allows us to retrieve the current position of an element relative to the offset parent. Contrast this with .offset(), which retrieves the current position relative to the document.
该.position()方法允许我们检索元素相对于偏移父元素的当前位置。将此与 对比.offset()，后者检索相对于文档的当前位置。
回答by Colton Gwinn
You can get the width output with .resizable() and stop event. Try adding this:
您可以使用 .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());
}
});
