CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-ui-draggable
fullOfQuestion
fullOfQuestion

Reputation: 605

how to drag element automatically jquery ui

I'm using jquery UI draggable. I do some works in drag function. for example I scale the dragging element according to it's position. I want to drag elements automatically to certain (x, y) (something like jquery animate({left:x, top:y}, 1000)); but I want to trigger drag function and scale element when is animating. how can I do this?

Upvotes: 1

Views: 1746

Answers (2)

pumpkinzzz
pumpkinzzz

Reputation: 2967

I suggest another approach to do that.

Use an external function to do the scale effect, and call it from both events (drag and 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);
}

See this example: FIDDLE

Upvotes: 1

Felix Fong
Felix Fong

Reputation: 985

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

PS:This code offer a button toggle function

$(function(){

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

  $button.click(function(){

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

  });

});

Upvotes: 0

Related Questions