JQuery UI draggable within a triangle -
i have div (it's rectangle of course) image of triangle background. want move image of circle inside triangle.
i chose jquery ui's draggable use couldn't manage constrain draggable image within triangle.
i thought should use containment option array can't define triangle 2 coordinates.
then found topic: constrain within triangle
there answer pretty uses sinus curve , i've got no idea how define triangle path use.
anyone can how should constrain circle's movement triangle?
one of friends came simple , nice solution: see it
$( "#circle" ).draggable({ drag: function(e, ui) { var width = $('#triangle').width(); var height = $('#triangle').height(); var x = ui.position.left + $(this).width() / 2; var y = ui.position.top + $(this).height() / 2; var difference = math.abs( x - width / 2 ); var min_y = height * ( difference / (width / 2) ); if ( y < min_y ) y = min_y; if ( x < 0 ) x = 0; if ( y < 0 ) y = 0; if ( x > width ) x = width; if ( y > height ) y = height; ui.position.top = y - $(this).height() / 2; ui.position.left = x - $(this).width() / 2; } });
Comments
Post a Comment