如何获取可拖动对象的位置 [英] How to get the position of a draggable object
问题描述
我正在尝试使用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） b $（this）
.addClass（ui-state-highlight）
.find（p）
.html（Dropped！）;
}
}）;
}）;
< / script>
现在我可以得到可拖动对象的位置，但我需要它可调整大小，除了得到x，y的draggable，我也需要它的大小。
任何帮助都会很棒！
谢谢。
您可以使用拖动事件：
drag：function（）{
var offset = $（this）.offset（）;
var xPos = offset.left;
var yPos = offset.top;
$（'＃posX'）。text（'x：'+ xPos）;
$（' posY'）。text（'y：'+ yPos）;
}
}）;
此演示由 drag event ，方法 offset（） 和 text（） 。
已编辑，以回应OP的评论，到原始问题：
David，实际上我需要的是一点点复杂但你可能会做很大的帮助。我想要做的是将一个可拖动的对象和一个可拖放的图像放在面板中，并将可拖动对象拖动到图像上，并获取其放置位置。我还需要可拖动的对象来调整大小，并在最后得到它的大小:)谢谢
呃，哇哇哇哇哇哇哇哇哇哇哇哇哇哇呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜<
$（'＃dragThis'）。draggable（
{
遏制：$（'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（）{
$这个）.animate（{'border-width'：'5px'，
'border-color'：'＃0f0'
}，500）;
$（'＃dragThis'） .draggable（'option'，'containment'，$（this））;
}
}）;
新更新的JS Fiddle演示，特色 revert：invalid ，所以将draggable div放在任何地方， em> droppable div将导致draggable动画回到其起始位置。如果这样会被赞赏。或者所需的...
要解决 draggable 对象的要求是可调整大小的，我不认为这是可能的，因为 draggable（）和 resizable（） 响应相同的交互。可能有可能，在某种程度上，但是目前超出了我的肯定，我害怕。
编辑以添加height / width要求，还可以整理一些东西并改进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>最终Y：< span>< / span>< / li>
< li id =width>宽度：< span>< / span>< / li>
< li id =height> Height：< span>< / span>< / li>
< / ul>
< / div>
< div id =dropHere>< / div>
css：
code> #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跨越：{
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：$（'身体'），
drag：function（）{
var offset = $（this）.offset（）;
var xPos = offset.left;
var yPos = offset。顶部;
$（'＃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> ;文件（$（this）.width（））;
$（'＃height> span'）。text（$（this）.height（））;
}
revert：'invalid'
}）;
$（'＃dropHere'）。droppable（
{
accept：'#dragThis'，
over：function（）{
$这个）.animate（{'border-width'：'5px'，
'border-color'：'＃0f0'
}，500）;
$（'＃dragThis'） .draggable（'option'，'containment'，$（this））;
}
}）;
I'm trying to get the x and y of the draggable object using JQuery.
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,y of the draggable, I also need the size of it.
Any help would be great!
Thanks.
You can use the drag event:
$('#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().
Edited in response to comment from OP, to original question:
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 think this 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 but the droppable div will cause the draggable to animate back to its starting position. If that'd be appreciated. Or desired at all...
To address the requirement for the draggable object to be resizable as well, I don't think that this is possible, since both draggable() and resizable() respond to the same interaction. It may be possible, in some way, but it's currently beyond my ken, I'm afraid.
Edited to add in the 'height/width' requirement, and also to tidy up a few things and improve the CSS. That said:
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));
}
});
这篇关于如何获取可拖动对象的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
