Snapping a ghost

While removed (during drag), it's possible to snap where the element were before.

HTML

<div id="obj1" class="obj"></div>
<div id="obj2" class="obj"></div>

CSS

.obj {
    position: absolute;
    width: 50px;
    height: 50px;
}
#obj1 {
    background: blue;
    top: 60px;
    left: 60px;
}
#obj2 {
    background: red;
    top: 100px;
    left: 100px;
}

JavaScript

var lost_block = $('#obj1');
$('.obj').draggable({
    stack : '.obj',
    snap: '.obj',
    snapTolerance: 10,
    start: function() {
        // HERE WE REMOVE AN ELEMENT...
        lost_block.remove();
        // ...BUT WE STILL CAN SNAP TO IT 
        // (EVEN IF NOT PRESENT ANYMORE)
    }
});

// the following lines are for visibility purpose only
//              feel free to drop them
$('<div />')
    .appendTo('body')
    .css({
        position: 'absolute',
        top: lost_block.position().top + 'px',
        left: 0,
        width: '100%',
        height: '1px',
        background: 'green'
    })
;
$('<div />')
    .appendTo('body')
    .css({
        position: 'absolute',
        top: (lost_block.position().top + lost_block.height()) + 'px',
        left: 0,
        width: '100%',
        height: '1px',
        background: 'green'
    })
;
$('<div />')
    .appendTo('body')
    .css({
        position: 'absolute',
        top: 0,
        left: lost_block.position().left + 'px',
        height: '100%',
        width: '1px',
        background: 'green'
    })
;
$('<div />')
    .appendTo('body')
    .css({
        position: 'absolute',
        top: 0,
        left: (lost_block.position().left + lost_block.width()) + 'px',
        height: '100%',
        width: '1px',
        background: 'green'
    })
;