Question

I am here using a simple java script for drag and drop
the script is

$(function() {
  $( "#sortable" ).sortable({
    revert: true
  });

  $( ".draggable" ).draggable({
    connectToSortable: "#sortable",
    helper: "clone",
    revert: "invalid",
  });

  $( "ul, li " ).disableSelection();
});

But I want to make a application which will show some images which can be dragged,
But when that image will dropped to the droppable area than it will show different contents regarding to the image, this contents could be anything like plaintext ,images, links etc. and they will come through my php databse.

Answer 1

You have a method “receive( event, ui )” that you should use to do this behaviour.

<script>
$(function() {
    $( "#sortable" ).sortable({
        revert: true,
        receive : function(event, ui) {
            $(ui.item).replaceWith($('<div>').text('blabla'));
        }
    });

    $( ".draggable" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid",

    });
    $( "ul, li " ).disableSelection();
});
</script>