我一直在研究一个脚本,它将可拖动div的限制限制为一个圆圈(而不是一个矩形的父div)。我发现这个帖子:How to constrain movement within the area of a circle似乎解决了我的一些问题。我已经有了适当的功能,当我在拖动功能中调用这些功能时,它将返回正确的x和amp; 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));
}
答案 0 :(得分:5)
是的,我终于明白了。我原以为.position是一个只读属性......但事实证明你也可以用它来设置位置。因此,在上面的代码中,我正在创建一个名为result的变量,并存储来自limit函数的返回值(它返回包含在封闭圆圈内的鼠标的x和y值)。所以,在那之后你只需要打电话:
ui.position={'top': result.y-10, 'left': result.x-10};
您需要删除该行:
$(that.light).css({'top': result.y, 'left': result.x});
这应该是你所需要的。希望这会有所帮助。
答案 1 :(得分:1)
由于我非常确定这些算法并不完全正确,而且您提供的信息对我非常有帮助,我希望感激不尽,并为每个人创建一个jsfiddle演示,以便查看算法的实际效果。我另外提供了一个默认界面来玩。
再次感谢。
代码:
CSS:
.ui-controlpad {
width:150px;
height:150px;
border:1px solid black;
-moz-border-radius:75px;
border-radius:75px;
z-index:1000;
}
.ui-controlpad-pad {
position:relative;
width:75px;
height:75px;
top:37.5px;
left:37.5px;
border:1px solid black;
-moz-border-radius:37.5px;
border-radius:37.5px;
z-index:1001;
background-color:grey;
}
HTML:
<div id="Controlpad"></div>
使用Javascript:
jQuery.fn.extend({
controlpad: function (options) {
$(this[0]).append('<div class="ui-controlpad"></div>');
$(".ui-controlpad").append('<div class="ui-controlpad-pad"></div>');
$(".ui-controlpad-pad").draggable({
drag: options.ondrag,
revert: true
});
}
});
function limit(x, y, cenx, ceny, r) {
var dist = distance([x, y], [cenx, ceny]);
if (dist <= r) {
return { x: x, y: y };
}
else {
x = x - cenx;
y = y - ceny;
var radians = Math.atan2(y, x);
return {
x: Math.cos(radians) * r + cenx,
y: Math.sin(radians) * r + ceny
}
}
}
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));
}
$(document).ready(function(){
var circle_cenx = 37.5;
var circle_ceny = 37.5;
var circle_radius = 37.5;
$("#Controlpad").controlpad({
ondrag: function(event, ui){
var result = limit(ui.position.left, ui.position.top, circle_cenx, circle_ceny, circle_radius);
ui.position = { 'top': result.y, 'left': result.x };
}
});
});
答案 2 :(得分:0)
检查可拖动元素的包含。 希望,以下链接可以帮助您
http://api.jqueryui.com/draggable/#option-containment
contaiment: [x1, y1, x2, y2];
您可以抓住光标位置并进行数学运算以相应地设置x1,y1,x2和y2的值。