Question

Im using the sortable() function in jquery in order to build something like a “chessboard” in a div. The thing that i want to implement is to have a div with sortable items something like this sortable example that you can drag and drop them in predefined places (like on chess). In addition to the sortable example i want to do something like this (suppose that this is a div).

Here is my code so far

    <style>
#sortable { list-style-type: none; margin: 0; padding: 0; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
    .class { width: 350px; height: 350px; }
</style>
<script>
$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});
</script>


<div class="demo">

<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default">4</li>
<li class="ui-state-default">5</li>
</ul>

</div>

Answer 1

I think you want to use draggable
Is this what you want to achieve? http://jsfiddle.net/GbQH2/3/

var original;
$( "#sortable li" ).draggable({
    grid: [100,100],
    containment:'#demo',
    start:function(event, ui){

        original = $(ui.helper).position();
    }
});
$('#sortable li').each(function(){
    $(this).css({top:$(this).position().top,left:$(this).position().left});
});
$('#sortable li').css({position:'absolute'});

$( "#sortable li" ).bind( "dragstop", function(event, ui) {
    $( "#sortable li" ).each(function(){
        if ($(this).hasClass('ui-draggable-dragging')) return;
        if(compareOffset($(this).offset(),ui.offset)){
            console.log(original);
            $(this).css({left:original.left,top:original.top});
            console.log($(this).position());
            return;
        }         
    });
});

function compareOffset(offset1, offset2){
    return offset1.top==offset2.top && offset1.left==offset2.left;
}