dropping into a draggable with jquery

Is it possible to drop a draggab开发者_运维问答le div into an already draggable and droppable div with jquery? I just cannot achieve this. I would be grateful if somebody could give a working example.

Thanks.

EDIT What I cannot achieve is a div into which different divs can be dropped and they can be sorted. Furthermore, these dropped and sortable divs should also at the same time be able to accommodate again sortable and dropable divs.

EDIT What I'm trying to make work is at : http://jsfiddle.net/QcbK8/

How about: threedub, built on jQuery.

just because an element is draggable does not mean it can not be droppable as well.

I have written a little example for you, it's very trivial, half the elements are drop only, red borders, half are drop targets and draggable too.

Demo: http://jsfiddle.net/63kgz/1/

HTML: (a few random objects)

<div class="drag"><span>A</span></div>
<div class="drag"><span>B</span></div>
<div class="drag"><span>C</span></div>
<br class="clear" />
<div class="drop"><span>D</span><p></p></div>
<div class="drop"><span>E</span><p></p></div>
<div class="drop"><span>F</span><p></p></div>

CSS: (ignore this, it's just to show up random objects)

.drag { width: 100px; height: 100px;
        float:left; margin-bottom: 10px; margin-right: 10px;
        border:1px solid #f00;
}
.drop { width: 200px; height: 200px;
        float:left; margin: 10px 10px 10px 10px;
        border: 1px solid #000;
}
.drop p { width: auto;
          color: #00f;
          margin-left: 50%; margin-right: 50%; margin-top: 25%; margin-bottom: 25%;
}
.clear { clear: both; }
div {
    user-select: none;
   -o-user-select:none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
}

jQuery:

// Everything is draggable
$('.drag,.drop').draggable();

// Only the .drop class is droppable
$('.drop').droppable({
    'accept': '.drag,.drop',
    'drop' : function(event, ui) {
        $(this).find('p').text(ui.draggable.find('span').text());
    }
});

// This just makes the sizes different so the objects fit in each other
$('.drag').css('width', function(i, value) {
    return parseInt(value) * (1 / (i + 1)) + 'px';
}).css('height', function(i, value) {
    return parseInt(value) * (1 / (i + 1)) + 'px';
});
$('.drop').css('width', function(i, value) {
    return parseInt(value) * (1 / (i + 1)) + 'px';
}).css('height', function(i, value) {
    return parseInt(value) * (1 / (i + 1)) + 'px';
});