Jquery Draggable Placeholder

Question

I want to have a placeholder to be displayed when i drag items into the droppable container as like the placeholder displayed in JQuery Sortable.

We have a placeholder option in JQuery sortable. Is there anything similar to this in JQuery draggable method or anyway how can i make that.

Any suggestions will be helpful.

Answer 1

Assuming your parent elements have IDs, here's some code from a recent project I did at work which worked for me:

$('#container').draggable({
    start: function(event, ui) {
        $('#' + ui.helper.context.id).addClass('active');
    },
    stop: function(event, ui) {
        $('#' + ui.helper.context.id).removeClass('active');
    }
})

Even without an ID you can probably get it to work. Hope this helps :)

Answer 2

try below code,

As you mentioned, "container will have many elements". I assume those container will have 'div' elements.

$("#container_drop div").droppable({
    drop: function (event, ui) {
        $( this ).addClass( "ui-state-highlight" );
    },
    over: function (event, ui) {
        $( this ).addClass( "ui-state-highlight" );
    },
    out: function (event, ui) {
        $( this ).removeClass( "ui-state-highlight" );
    }
});

Answer 3

Try the blow code,

$( "#container_drag" ).draggable({

      drag: function() {
        $('#container_drop').addClass('highlight_container');
      },
      stop: function() {
        $('#container_drop').removeClass('highlight_container');
      }

});

Where, container_drag - your draggable container and container_drop - where the items going to be dropped.

And in Css,

.highlight_container{border:...,background:...}