Jquery动画移动元素左不工作
Jquery animate move element left not working at all
我正在做一款可以拖动元素的游戏当拖动时元素必须移动
左(加减)取决于拖动方向。我已经试过无数种方法了。正常的'revert:true'对于水平元素不能正常工作,因为元素
返回到错误的位置。最后,我使用了Jquery中的animate()函数,它确实有效
可以,但是它只能上下拖动元素,但是左右方向不能
工作。下面是我的js脚本:
function setAllMatchesDraggable(){
$('.matches').not('.answer').draggable({
// Can't use revert, as we animate the original object
//revert: true,
helper: function(){
// Create an invisible div as the helper. It will move and
// follow the cursor as usual.
return $('<div></div>').css('opacity',0);
},
create: function(){
// When the draggable is created, save its starting
// position into a data attribute, so we know where we
// need to revert to.
var $this = $(this);
if(($this).hasClass("flip_left") || ($this).hasClass("flip_right"))
{
$this.data('top',$this.position().top - 29);
$this.data('left',$this.position().left);
}else{
$this.data('top',$this.position().top);
$this.data('left',$this.position().left);
}
},
stop: function(){
// When dragging stops, revert the draggable to its
// original starting position.
var $this = $(this);
$this.stop().animate({
"top": $this.data('top')
},200,'easeOutElastic',function(){
$(this).stop().animate({"left":$this.data('left')},200,'easeOutElastic');
});
},
drag: function(event, ui){
// During dragging, animate the original object to
// follow the invisible helper with custom easing.
$(this).stop().animate({
"top": ui.helper.position().top
},200,'easeOutElastic',function(){
$(this).stop().animate({"left":ui.helper.position().left},200,'easeOutElastic',function(){
console.log(ui.helper.position().left);
});
});
}
});
}
我希望你能帮忙。提前感谢:)
在同一函数中使用top和left
$this.stop().animate({
"top": $this.data('top'),
"left" : $this.data('left')
},200,'easeOutElastic') ;
试一试:
...
create: function(){
var $this = $(this);
$this.data({
'top': $this.position().top,
'left': $this.position().left
});
},
stop: function(){
var $this = $(this);
$this.stop().animate({
top: $this.data('top'),
left: $this.data('left')
},200,'easeOutElastic');
},
drag: function(event, ui){
$(this).stop().animate({
top: ui.helper.position().top,
left: ui.helper.position().left
},0,'easeOutElastic');
}
...
相关文章:
- JavaScript-在手机上不工作的情况下,在外部单击时隐藏元素
- 用javascript将script元素附加到头部;铬不能工作
- 点击功能没有'ajax调用动态元素(Backbone)后无法工作
- 无法使以下ng on click outside指令在同一页面上的两个元素上工作
- DIV怎么能像Javascript中的另一个元素一样工作呢
- javascript()onclick隐藏元素-dos'我不在firefox工作
- 没有获得基础's的Javascript元素工作(与Laravel和Elixir)
- 为什么在ASP.NET Ajax更新面板中执行任何操作后javascript元素都停止工作
- jQuery插件在为元素分配id时停止工作
- 注入的元素和jQuery脚本.如何让他们一起工作
- 自动完成搜索无法正常工作,请不要迭代$中的所有元素.每个ul-li都会及时显示响应
- 我根据解决方案按类对
- 元素进行分组,但需要帮助了解它的工作原理
- 让 jquery 为 ajax 添加的元素工作的最佳方法是什么?
- 为什么这个脚本只工作一次?只替换元素一次,然后再也不替换
- CSS没有'使用javascript向页面动态添加元素时无法工作
- 如何使toggleClass()在元素外部单击时工作
- JQuery语法-remove()赢得'不要在元素上工作
- 似乎无法获得'.focus()'元素工作.
- HTML JavaScript,我如何能够通过给每个元素一个不同的Id来使用JavaScript使这个函数工作
- 量角器sendKeys()不工作元素不可见