Set Position During Drag using Jquery Draggable Div -

Set Position During Drag using Jquery Draggable Div -

i've been working on script limit containment of draggable div circle (instead of rectangular parent div). found thread: how constrain motion within area of circle seemed solve of questions. i've got proper functions in place , when phone call functions within drag function homecoming proper x & y position of div. know because can check console log during drag function , check position of div. however, problem can't seem set actual position during drag event. console reports proper position values, div never gets constrained circular boundary. example, if drag div center of circle , move vertically past circle boundary... div doesn't stop @ circle, console clamps position [0,50]//50 the center of circle in both x & y axis. read on other threads might have utilize helper object, didn't seem anywhere method. i'm posting simplified illustration in hopes can help. give thanks you.

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) { homecoming {x: x, y: y}; } else { x = x - circle_cenx; y = y - circle_ceny; var radians = math.atan2(y, x); homecoming { 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]; homecoming math.sqrt(math.pow(x1 - x2, 2) + math.pow(y1 - y2, 2)); }

yes, did figure out. had thought .position read property... turns out can utilize set position well. so, in code above, i'm creating variable called result , storing homecoming value limit function (which returns x , y values of mouse capped within containment circle). so, after have phone call this:

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

you'll need remove line:

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

this should need. hope helps.

draggable