<?php 

<div id="items" style="border:solid 2px red;padding:10px;">

<div id="item1" style="border:solid 1px black;width:50px;height:50px;">bloc 1</div>



<div id="item2" style="border:solid 1px black;width:50px;height:50px;">bloc 1</div>

<div id="item3" style="border:solid 1px black;width:50px;height:50px;">bloc 1</div>

</div>

<div id="bloc2" style="border:solid 1px black;width:250px;height:250px;">

bloc 2

</div>





  <script type="text/javascript">

  $(document).ready(function(){

    $("#item1").draggable({'revert':'invalid', containment:'bloc2', opacity: 0.5});

    



    $("#items").sortable({items: 'div'});

$('#items').bind('sortover', function(event, ui) {

alert(true);

});

    

    $("#bloc2").droppable({

      drop: function() { alert('dropped'); }

    });

     $("#items").droppable({

        drop: function() { alert(true); $("#items").sortable( 'refreshPosition' ); }

    });

  });

  </script>