Change div contents when dragging using jquery ui draggable

Question

I have a draggable div (jquery ui draggable) that contains mostly text. Can I change the contents of a div when dragging and dropping?

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

Answer 1

Try the following: http://jsfiddle.net/6JtMp/

Here is 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 --> 

Answer 2

How about drag ?

drag (event, ui)

It starts when the mouse moves while dragging, just before the current move.

Just specify drag callback:

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

Answer 3

There are three different events that you can hook up that are likely to allow you to do what you are looking for. I would check the definition of functions for start, drag and / or stop events. Here is the api doc: http://jqueryui.com/demos/draggable/#event-drag