изменить содержимое div при перетаскивании с помощью jquery ui draggable

Question

У меня есть перетаскиваемый div (jquery ui draggable), который содержит в основном текст. Могу ли я изменить содержимое div при перетаскивании?

(на самом деле, я хочу сделать его меньше и красивее)

Answer 1

Попробуйте: http://jsfiddle.net/6JtMp/

Вот код:

<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

Как насчет drag ?

drag (event, ui)

Срабатывает, когда мышь перемещается во время перетаскивания, непосредственно перед тем, как происходит текущее перемещение.

Просто укажите обратный вызов drag :

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

Answer 3

Есть три различных события, которые вы можете подключить, что, вероятно, позволит вам делать то, что вы ищете.Я хотел бы проверить определение функций для запуска, перетаскивания и или остановки событий.Вот api doc: http://jqueryui.com/demos/draggable/#event-drag