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

我正在尝试使用JQuery获取可拖动对象的x和y。

场景是，我将一个对象拖放到另一个对象上，并希望得到拖放对象的位置。 编辑：现在我可以获得对象的位置，但我需要更多：

这是我尝试过的;

 $(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!"); } }); });  

现在我可以获得可拖动对象的位置，但我需要它可以resize，除了获得可拖动的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小提琴演示 。

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

---

编辑回应OP的评论，原始问题：

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

……呃， 哇 ……

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

 $('#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：

 
 
 
x: 
 
y: 
 
Final X: 
 
Final Y: 
 
Width: 
 
Height: 
 
 
 
 

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演示，以上 。

Answer 2

您可以尝试以下方法之一：

 $(this).position() 

要么

 $(this).offset() 

.position()方法允许我们检索元素相对于偏移父元素的当前位置。 将此与.offset()对比，后者检索相对于文档的当前位置。

来自http://api.jquery.com/position/

Answer 3

您可以使用.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()); } });