使用jquery ui draggable拖动时修改div的内容答案

【问题标题】：modify contents of div while dragging with jquery ui draggable使用jquery ui draggable拖动时修改div的内容
【发布时间】：2011-03-23 20:27:08
【问题描述】：

我有一个主要包含文本的可拖动 div (jquery ui draggable)。我可以在拖动时更改 div 的内容吗？

（其实我是想让div更小更好看）

【问题讨论】：

标签： jquery jquery-ui draggable

【解决方案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 -->

【讨论】：

【解决方案2】：

drag 呢？

拖动（事件，用户界面）

在拖动过程中移动鼠标时触发，就在当前移动发生之前。

只需指定拖动回调：

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

【讨论】：

【解决方案3】：

您可以挂钩三种不同的事件，这些事件可能会让您做您想做的事。我会检查开始、拖动和/或停止事件的定义函数。这是api文档：http://jqueryui.com/demos/draggable/#event-drag

【讨论】：