如何自动拖动元素jquery ui

Question

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

Answer 1

我建议另一种方法来做到这一点。

使用外部函数进行缩放效果，并从两个事件（drag 和 animate）中调用它：

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

  });

});