JQuery Draggabble - 恢复到原始位置不起作用

Question

设置为还原的可拖动元素正在还原到原始位置加上左侧的一些像素。我只是想让元素恢复到原来的位置。

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

draggable 的位置生成函数似乎不适合 rotates。但是，由于无论如何您都是手动生成原始位置，因此您可以简单地将它们存储在一个单独的变量中并自己恢复可拖动对象：

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

示例如下 fiddle：http://jsfiddle.net/w48evbd1/

JQuery Draggabble - 恢复到原始位置不起作用

JQuery Draggabble - Revert to original position not working

jquery

jquery-ui

jquery-ui-draggable