我试图记下可拖动div相对于其DOM父级的位置。我有一个全局对象g
,其中包含另一个对象bPos
,该对象应该包含div class = 'b'
中div id ^= 'd'
的位置。
这是我的代码:
function() {
var thisDiv = "";
var thisDivID = "";
$(".b").draggable({
start: function(event, ui) {
thisDiv = $(this).closest("div[id^='d']");
thisDivID = thisDiv.attr("id");
console.log(thisDivID); //also returning undefined
},
stop: function(event, ui) {
var thisX = event.pageX;
var thisY = event.pageY;
var thisbPos = {
id: thisDivID,
x: thisX,
y: thisY
}
g.bPos[thisDivID] = thisbPos;
console.log(thisDivID);// returning undefined
}
});
}
控制台显示thisDivID
为undefined
。即使我为其指定了一个任意值,它仍然会显示为undefined
。任何帮助都会很棒。
答案 0 :(得分:-1)
使用'drag:'方法代替。 我使用它来允许列表项被拖出“列出”列表,但有一点阻力。通常情况下,y网格设置为一个较大的数字,因此它不能左右移动,只能向上和向下移动。在这里的代码中,它会弹出并在用户尝试将其向左或向右移动127px后自由移动。
希望你从这个代码中得到了我的想法:
drag: function (event, ui)
{
var left = ui.offset.left; //Offset of the list item currently being dragged
if (parseInt(left) > 127)
{
if (!overlay)
{
overlay = true;
$(".li-unreachable").draggable("option", "grid", [1, 1]); //free-moving
showOverlay();
}
} else
{
if (overlay)
{
hideOverlay();
$(".li-unreachable").draggable("option", "grid", [300, 50000]); //y-axis more or less locked down
overlay = false;
}
}
编辑:如果您需要更多代码,请告诉我,我只抓住了看似相关的部分。
编辑2:我想也应该指出,如果你将“$(this)”更改为“ui”,你的代码应该有效。
编辑3:这里有一些更重要的代码:
$(".b").draggable({
start: function(event, ui) {
var x = ui.offset.left; //x coordinate of the object that is being dragged.
var y = ui.offset.top; //y coordinate of the object that is being dragged.
var elementBeingDragged = ui.item; // ui.helper would work too.
},
stop: function(event, ui) {
var x = ui.offset.left; //x coordinate of the object that is being dragged.
var y = ui.offset.top; //y coordinate of the object that is being dragged.
var elementBeingDragged = ui.item; // ui.helper would work too.
}
});