JQuery Draggabble -恢复到不工作的原始位置
JQuery Draggabble -恢复到不工作的原始位置
提问于 2015-02-25 02:57:06
设置为还原的可拖动元素正在恢复到原来的位置，加上左边的一些像素。我只想让元素恢复到它原来的位置。
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/
如果您反复拖动元素，您会注意到，每次拖动足够多的时间，...they实际上可以离开屏幕时，它们就会更接近容器的左侧边缘。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-02-25 10:11:54
draggable的位置生成函数似乎对rotate没有胃口。但是，由于您正在手动生成原始位置，所以您可以简单地将它们存储在一个单独的变量中，然后自己还原可拖动的位置：
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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28710317
复制相关文章
相似问题
腾讯云开发者
