Sortable doesn't work properly with draggable and droppable

See demo http://jsfiddle.net/nivea75m开发者_Go百科l/5NhFA/1/.

Here, the green blocks at bottom which can be dragged and dropped into the dark gary area. Also I want the 3 blocks are sortable, for example, if the Block2 are dragged into dark gray area first and the Block3 should move to the Block2's position.

Currently the sortable function is working without Draggable & Droppable, view it at http://jsfiddle.net/nivea75ml/sNnAe/. However it doesn't work with Draggable & Droppable, see http://jsfiddle.net/nivea75ml/5NhFA/1/.

Can anyone help me out? Thanks in advance!

Sounds like you just want to use Sortable with a connected list: http://jqueryui.com/demos/sortable/#connect-lists

I modified your first jsfiddle:

HTML:

<div class="demo">

    <div id="droppable" class="drp">

    </div>
    <div id="draggableElements" class="drp">
        <div class="draggable">
            <p>Sen1</p>
        </div>
        <div class="draggable">
            <p>Sen2</p>
        </div>
        <div class="draggable">
            <p>Sen3</p>
        </div>

    </div>
</div>

Javascript:

$(function() {

            $("#draggableElements, #droppable").sortable({
                    connectWith: ".drp",
                    placeholder: "ui-draggable"
                });

    });

This makes the above grey area sortable as well, which may or may not suit your needs completely. If you're wanting to drop a sortable item into a droppable, and be able to bring it back into a sortable, take a look at this: jQuery Sortable and Droppable.