How to make a part of a draggable independantly draggable using jQuery UI?

I have some boxes looking like this:

--------------------------
|   _____                |
|  |     |       开发者_开发百科        |
|  |_____|               |
|                        |
--------------------------

Generated by HTLM looking like this:

<div class='container'>

    <div class='vdo_img'>
        <img />
    </div>

<!-- bunch of links and <p> -->
</div>

I turn it into a draggable with the jquery UI plugin:

    $('.container').draggable({distance: 10, helper: 'clone'})

But I would like to make the img draggable as well, independantly.

Problem, when I do:

    $('.vdo_img').draggable({distance: 10, helper: 'clone'})

I only get the whole box, never the picture. I can guess there is a story about fired event and all, but can't find a good solution.

Try this::

http://docs.jquery.com/UI/Draggable