Scroll bar problem when applying JQuery UI effects to text

Question

I'm trying to use JQuery UI to make a block of text draggable (and later, droppable and resizable). The problem is that all of the JQuery UI documentation examples act on objects that have an explicitly specified CSS width and height. If you do something like this:

<script type="text/javascript">
$(function() {
$(".draggable").draggable();
});
</script>
<p class="draggable">Drag me around</p>

Without having a CSS width and height specified, the horizontal scroll bar in the browser shows up and starts going crazy as soon as you touch the text object. The problem goes away if you specify CSS width and height properties, but the text I'm working with is dynamic... I can't specify width and height ahead of time. Is there another way to prevent the strange scroll bar behavior?

Answer 1

You could dynamically add a width and/or height once you start dragging the object and then return those styles to auto once you drop it.

Answer 2

You can try using a <span> tag instead of <p>