I am trying to implement a behavior for my draggable items.
The behavior is described here :
My box contains multiple draggable items which are sorted on page load
I can drag and item from that box on a drop area
But if I drag it back to the box it should re-place at its original position based on its data-attribute
I have no clue how to achieve this. I saw that sortable could possibly do this but I don't know how to combine it with draggable.
Thank you
HTML
Drop 1
Drop 2
Drop 3
JS
$( ".box" ).draggable({
scope: 'demoBox',
revert: true,
cursorAt: { top: 40, left: 40 },
revertDuration: 100,
start: function( event, ui ) {
//Reset
$( ".box" ).draggable( "option", "revert", true );
console.log('-');
}
});
$( ".multiple-drag-area" ).droppable({
scope: 'demoBox',
drop: function( event, ui ) {
var area = $(this).find(".area").html();
var box = $(ui.draggable).html()
$( ".box" ).draggable( "option", "revert", false );
//Display action in text
console.log("[Action]
" + box + "" + " dropped on " + "
" + area + "");
//Realign item
$(ui.draggable).detach().css({top: 0,left: 0, marginRight:4}).appendTo(this);
},
})
$( ".drag-area" ).droppable({
scope: 'demoBox',
drop: function( event, ui ) {
var area = $(this).find(".area").html();
var box = $(ui.draggable).html()
$( ".box" ).draggable( "option", "revert", false );
//Display action in text
console.log("[Action]
" + box + "" + " dropped on " + "
" + area + "");
//Realign item
$(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
},
accept: function(draggable) {
return $(this).find("*").length-1 == 0 && (!$(this).hasClass("blocked-seat"));
}
})
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
