CODEWITHSUNDEEP
jqueryjquery-uidraggable
xpanta
xpanta

Reputation: 8418

modify contents of div while dragging with jquery ui draggable

I have a draggable div (jquery ui draggable) which contains mainly text. Can I change the contents of the div while dragging?

(actually, I want to make it a smaller and nicer div)

Upvotes: 4

Views: 8910

Answers (3)

Evhz
Evhz

Reputation: 9238

What about drag?

drag( event, ui )

Triggered while the mouse is moved during the dragging, immediately before the current move happens.

Just specify the drag callback:

$( "#draggable" ).draggable({
  drag: function( event, ui ) {
      // do something while dragging
  }
});

Upvotes: 1

Fareesh Vijayarangam
Fareesh Vijayarangam

Reputation: 5052

Try this out: http://jsfiddle.net/6JtMp/

Here's the code:

<style>
    #draggable { width: 150px; height: 150px; padding: 0.5em; background-color: green; }
    </style>
    <script>
    $(function() {
        $( "#draggable" ).draggable({
            start: function(event, ui) { $(this).css("height",10); },
            stop: function(event, ui) { $(this).css("height",150); }        
        });
    });
    </script>



<div class="demo">

<div id="draggable" class="ui-widget-content">
    <p>Drag me around</p>
</div>

</div><!-- End demo -->

Upvotes: 9

scrappedcola
scrappedcola

Reputation: 10572

There are three different events that you can hook into which will probably enable you to do what you are looking for. I would check out defining functions for the start, drag, and or stop events. Here is the api doc: http://jqueryui.com/demos/draggable/#event-drag

Upvotes: 0

Related Questions