Question

我正在使用jquery UI draggable。我在拖动功能方面做了一些工作。例如，我根据它的位置缩放拖动元素。我想将元素自动拖动到某些（x，y）（类似于jquery animate({left:x, top:y}, 1000));，但我想在动画时触发拖动功能和缩放元素。我该怎么做？

Answer 1

我建议采用另一种方法。

使用外部函数执行缩放效果，并从两个事件（拖动和动画）中调用它：

var $myDraggable = $('#draggable').draggable({
    drag: function( event, ui ) {
        scale(ui.offset.left, ui.offset.top); 
    }
});

$('button').on('click', function(){
    $myDraggable.animate(
    { left:100, top:100 }, 
    {
        duration: 1000,
        progress: function(draggable){
           scale(draggable.elem.offsetLeft, draggable.elem.offsetTop);
        }
    });
});

function scale(left, top){
    //your scaling logic here
    console.log("scaling", left, top);
}

请参阅此示例：FIDDLE

Answer 2

https://jsfiddle.net/moongod101/8gdvz9jL/

PS：此代码提供按钮切换功能

$(function(){

  $button = $('button')
  $box = $('.box')
  $click = 0

  $button.click(function(){

    if($click !=0){
        $click ++
        $box.removeClass('active')
    }else{
        $click --
        $box.addClass('active')
    }

  });

});

如何自动拖动元素jquery ui

2 个答案: