i using jquery ui draggable , want have draggable div animate during drag event. imagine when stationary, square div in example attached magnet. wen click on , start dragging, not drag until distance threshold reached (distance = distance between center of div , current mouse position). after threshold reached, div animate toward mouse , should proceed normal drag event.
my problem when mouse dragged past distance threshold @ fast enough speed, div start flashing because switching between showing animated div , 1 being dragged. problem occurs if drag mouse fast enough , stop, div animates last recorded mouse position, time calculation made, mouse might @ different position, mouse @ 1 spot , div @ another. ideas on how make div animate towards mouse , continue drag event in 1 smooth transition? (also, want animation long enough can see div moving. if duration set 1, works fine want more visually appealing , smooth) here demo: http://jsfiddle.net/b84wn2nf/
here of code found in demo:
$(".dragsquare").draggable({ drag: function (event, ui) { if($(this).hasclass("stuck")){ var mx = event.pagex; var = event.pagey; ui.position.left = $(this).position().left; ui.position.top = $(this).position().top; var d = math.floor(math.sqrt(math.pow(mx - ($(this).offset().left + ($(this).width() / 2)), 2) + math.pow(my - ($(this).offset().top + ($(this).height() / 2)), 2))); console.log(d) if (d > 200) { var animatetox = event.pagex - $(this).width() / 2; var animatetoy = event.pagey - $(this).height() / 2; $(this).stop(true, true).animate({ left: animatetox + 'px', top: animatetoy + 'px' }, { /*easing: 'easeoutbounce,'*/ duration: 500, start: function () {}, complete: function () { $(this).removeclass("stuck"); } }); } } } });
okay, know posted long time ago, , since then, started use snap.js svg library instead of jquery, makes easier cancel drag, before switch, solved problem way could: modifying source code.
in jquery-ui.js, locate jquery ui draggable section, , scroll down _mousedrag method. need in own code set global variable tell jquery if want drag behavior overridden. used 'canceldrag' variable name. when set false, dragging behaves normally.
in _mousedrag, see following code:
this.helper[0].style.left = this.position.left + "px"; this.helper[0].style.top = this.position.top + "px"; what need wrap in conditional statement depends on boolean variable, looks this:
if(!canceldrag){ this.helper[0].style.left = this.position.left + "px"; this.helper[0].style.top = this.position.top + "px"; } basically, if canceldrag set true, jquery drag handler not change position of element. not ideal, , should not used, works. make sure if modify file, not using minified source.
Comments
Post a Comment