gpt4 book ai didi

jquery - 使用 Jquery Draggable Div 设置拖动期间的位置

转载 作者:行者123 更新时间:2023-12-01 02:44:33 30 4
gpt4 key购买 nike

我一直在编写一个脚本,它将可拖动的 div 限制为圆形(而不是矩形父 div)。我找到了这个帖子:How to constrain movement within the area of a circle这似乎解决了我的一些问题。我已经准备好了正确的函数,当我在拖动函数中调用这些函数时,它将返回 div 的正确 x 和 y 位置。我知道这一点是因为我可以在拖动功能期间检查控制台日志并检查 div 的位置。但是,我的问题是我似乎无法在拖动事件期间设置实际位置。控制台报告正确的位置值,但 div 实际上从未被约束到圆形边界。例如,如果我将 div 拖到圆的中心,然后将其垂直向上移动到圆边界...div 不会停在圆处,但是控制台将位置限制为 [0,50]//50 是 X 轴和 Y 轴上的圆心。我在其他一些线程上读到我可能必须使用辅助对象,但我似乎没有用这个方法得到任何结果。我发布了一个简化的示例,希望有人能提供帮助。谢谢。

this.light = document.createElement("div");
this.light.style.position='absolute';
this.light.style.left="20px";
this.light.style.top="40px";
this.light.style.width="20px";
this.light.style.height="20px";

$(parentdiv).append(this.light);

var circle_cenx = 50.0;
var circle_ceny = 50.0;
var circle_radius = 50.0;

$(this.light).draggable({
drag: function( event, ui ){
var position = $(that.light).position();
var result = limit(position.left+10, position.top+10, circle_cenx, circle_ceny);
$(that.light).css({'top': result.y, 'left': result.x});
position = $(that.light).position();
console.log(position);
}
});

function limit(x, y, cenx, ceny) {
var dist = distance([x, y], [cenx, ceny]);
if (dist <= circle_radius) {
return {x: x, y: y};
}
else {
x = x - circle_cenx;
y = y - circle_ceny;
var radians = Math.atan2(y, x);
return {
x: Math.cos(radians) * circle_cenx + circle_radius,
y: Math.sin(radians) * circle_ceny + circle_radius
}
}
}

function distance(dot1, dot2) {
var x1 = dot1[0],
y1 = dot1[1],
x2 = dot2[0],
y2 = dot2[1];
return Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2));
}

最佳答案

是的,我终于明白了。我曾以为 .position 是只读属性...但事实证明您也可以使用它来设置位置。因此,在上面的代码中,我创建了一个名为 result 的变量,并存储 limit 函数的返回值(该函数返回封闭圆内的鼠标的 x 和 y 值)。所以,之后你只需调用这个:

ui.position={'top': result.y-10, 'left': result.x-10};

您需要删除该行:

$(that.light).css({'top': result.y, 'left': result.x});

这应该就是您所需要的。希望这会有所帮助。

关于jquery - 使用 Jquery Draggable Div 设置拖动期间的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14821572/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com