JQuery Draggabble - вернуться в исходное положение не работает

Question

Перетаскиваемые элементы, установленные для возврата, возвращаются в исходное положение PLUS на несколько пикселей влево. Я просто хочу, чтобы элемент возвращался в исходное положение.

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'); 
} 
} 

См http://jsfiddle.net/gh3bk7xo/6/

Если вы постоянно перетаскивать элементы, которые вы заметите, что они возвращаются ближе к левому краю своего контейнера каждый раз, когда ... они действительно могут перейти от экрана при перетаскивании достаточного количества раз.

Answer 1

Функции создания функции перетаскивания, похоже, не имеют желудка для rotate. Однако, так как вы генерируете исходные позиции все равно вручную, вы можете просто хранить их в отдельной переменной и Возвратить draggables себя:

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); 
     } 
    } 
}); 

Вот образец скрипку: http://jsfiddle.net/w48evbd1/