CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
IlludiumPu36
IlludiumPu36

Reputation: 4304

JQuery Draggabble - Revert to original position not working

Draggable elements set to revert are reverting to original position PLUS a number of pixels to the left. I just want the element to revert to its original position.

var browser;    

if(navigator.userAgent.indexOf("Chrome") != -1 ){
   browser = 'webkit';
} else if(navigator.userAgent.indexOf("Opera") != -1 ){
   browser = 'webkit';
} else if(navigator.userAgent.indexOf("Firefox") != -1 ){
   browser = 'firefox';
} else if(navigator.userAgent.indexOf("Safari") != -1 ){
   browser = 'webkit';
} else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )){
   browser = 'ie'; 
} 

if(browser == 'ie'){
    $('.draggable').css('cursor', 'move');
}

$('.draggable').each(function(i,el){
    var tLeft = Math.floor(Math.random()*350),
        tTop  = Math.floor(Math.random()*450);
    var rotate=Math.floor(Math.random() * (360 - 1 + 1)) + 1;
    $(el).css({ 
         '-ms-transform': 'rotate(' + rotate + 'deg)',
         '-webkit-transform': 'rotate(' + rotate + 'deg)',
         'transform': 'rotate(' + rotate + 'deg)',
        })    
    $(el).css({position:'absolute', left: tLeft, top: tTop});
});


$("[id^=draggable_]").draggable({
  stack: '#draggables_container div',
  revert: true
});

$(".drag_slot").droppable({   
  hoverClass: "hover",
  accept: '#draggables_container div',
  drop: dropped
});

function dropped(event, ui) {
var slotNumber = $(this).data('slot');
var draggableNumber = ui.draggable.data('draggable');
if (slotNumber == draggableNumber) {
r = 0;
if(browser == 'webkit'){
ui.draggable.css('-webkit-transform','rotate(' + (r += 360) + 'deg)');  
} else {
ui.draggable.css('transform','rotate(' + (r += 360) + 'deg)');
}
if($(this).is(':empty')){
ui.draggable.position({
    my:        "left top",
    at:        "left+5 top",
    of:        this, 
    collision: "fit"
})
} else {
    ui.draggable.position({
    my:        "left top",
    at:        "left+35 top",
    of:        this, 
    collision: "fit"
})
}
ui.draggable.draggable('disable');
ui.draggable.draggable( 'option', 'revert', false );
ui.draggable.draggable.toggleClass('drag_disable');
}
}

See http://jsfiddle.net/gh3bk7xo/6/

If you repeatedly drag the elements you will notice that they revert closer to the left edge of their container each time ...they can actually move off screen if you drag enough times.

Upvotes: 1

Views: 436

Answers (1)

blgt
blgt

Reputation: 8205

The draggable's position generating functions seem to have no stomach for rotates. However, since you're generating the original positions manually anyway, you can simply store them in a separate variable and revert the draggables yourself:

var positions = {}
$('.draggable').each(function(i,el){
    // ... snip
    positions[$(this).attr("id")] = {position:'absolute', left: tLeft, top: tTop};
    $(el).css(positions[$(this).attr("id")]);
});

$(".draggable").draggable({ // why the different selectors?
  // ... snip
  revert: false,
  stop: function() {
      if ( !$(this).draggable("option", "disabled") ) { // since disabled in droppable
          $(this).animate(positions[$(this).attr("id")], 500);
      }
  }
});

Here's the sample fiddle: http://jsfiddle.net/w48evbd1/

Upvotes: 1

Related Questions