拖动时记录DOM位置
Recording DOM position on a drag
我试图注意一个可拖动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
。任何帮助都会很棒。
请改用"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.
}
});
相关文章:
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 如何'剪切'DOM元素并将其显示在其他位置
- 在jquery中是否有任何方法或位置可以编写从Dom中删除页面后调用的方法
- 如何在不创建新元素的情况下修改 DOM 元素的位置
- 在插入符号位置获取DOM元素
- DOM数组中的位置
- 移动项在DOM中的位置
- 获取所选元素的位置,而不是 DOM 中元素的索引
- 返回的y值大于实际y位置[JS(无jQ)/DOM]
- 在 DOM 中添加新元素后,保留元素屏幕位置
- 从 DOM 中删除元素并将它们添加回原来的位置
- 使用 javascript 在 dom 树中向上或向下移动一个位置
- 如何对一组jQuery对象进行排序(但不是它们在DOM/Markup中的位置)
- 如何使用 DOM-Methods 在 JavaScript 调用的位置插入文本
- 如何将一个dom元素附加到另一个dom元件中,但在jquery中的第一个位置
- 我将如何获得角色的DOM位置
- 检测正在移动的DOM中的元素的位置
- Meteor:当页面刷新或其他页面位置时,如何保留dom操作
- 如何在不更改DOM的情况下获取javascript中的标记位置
- jQuery-如何将事件附加到DOM对象,并在不同的位置将处理程序绑定到它