javascript jQuery - 获取删除元素的相对位置和属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4583986/
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
jQuery - get relative position and attribute of dropped elements
提问by Tim
I have draggable elements which can be dropped in droppable areas. If an element is dropped, the dropfunction is called:
我有可以拖放到可放置区域的可拖动元素。如果删除元素，drop则调用该函数：
$('#droppable').droppable({
scope: "items",
drop: function (event, ui) {
// this one is called if an element is dropped in this droppable area
}
});
My draggable element:
我的可拖动元素：
<div class="drag" data-noteid="10">Drag me</div>
...
$('.drag').draggable({
revert: "invalid",
scope: "items"
});
What I need to know if the element is dropped is the value of data-noteidand the relative position of the droppable area. So, if the element is dropped on the upper left corner, the x/y coordinates must be 0/0.
如果元素被删除，我需要知道的是可放置区域的值data-noteid和相对位置。因此，如果元素放在左上角，则 x/y 坐标必须为 0/0。
I created a full working example here: http://jsbin.com/utivo5/2/
我在这里创建了一个完整的工作示例：http: //jsbin.com/utivo5/2/
So normally I can access the attributes like this:
所以通常我可以访问这样的属性：
alert($(this).data("noteid"));
alert($(this).position().top);
alert($(this).position().left);
but all I get in this case is undefined.
但在这种情况下我得到的只是undefined.
Do anyone know how I can access them? I think it must be possible with eventor uiwhich is a parameter of the called dropfunction?!
有谁知道我如何访问它们？我认为必须可以使用eventor uiwhich 是被调用drop函数的参数？！
Thank you in advance & Best Regards, Tim.
提前致谢并致以最诚挚的问候，蒂姆。
回答by Nick Craver
In this case you want the uiargument to get the draggable, rather than thiswhich refers to the droppable area, specifically ui.draggablehere. It should look like this overall:
在这种情况下，您希望ui参数获得可拖动的，而不是this指的是可放置的区域，特别是ui.draggable这里。整体应该是这样的：
drop: function (event, ui) {
var pos = ui.draggable.offset(), dPos = $(this).offset();
alert("nodeid: " + ui.draggable.data("noteid") +
", Top: " + (pos.top - dPos.top) +
", Left: " + (pos.left - dPos.left));
}
For the position, we need to subtract the droppable's top/left position to get the value you want here, that's the dPosabove getting removed.
对于位置，我们需要减去 droppable 的顶部/左侧位置以获得您想要的值，即dPos删除上面的值。
回答by Nick Wright
I found for my circumstances that the above didn't work. Not sure why - it always gave me an X = -7 and Y = 229.
我发现根据我的情况，上述方法不起作用。不知道为什么 - 它总是给我一个 X = -7 和 Y = 229。
But this did work (located in drop function handler):
但这确实有效（位于 drop 函数处理程序中）：
alert('X pos in drop parent container = ' + (ui.position.top - $(this).offset().top));
