如何自动拖动元素 jquery ui

Question

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

Answer 1

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

  });

});

Answer 2

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

使用外部函数做缩放效果，并从两个事件（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