Pessoal to querendo melhorar o código de um drag drop, segue o código
<img src="image.png" class="card01">
<img src="image.png" class="card02">
<div class="bloco01"></div>
<div class="bloco02"></div>
$( function() {
$( ".card01" ).draggable({ revert: "invalid" });
$( ".bloco01" ).droppable({
accept: ".card01",
drop: function( event, ui ) {
$( this ).addClass("ui-state-highlight");
$( ".card01" ).addClass('dropped');
}
});
$( ".card02" ).draggable({ revert: "invalid" });
$( ".bloco02" ).droppable({
accept: ".card02",
drop: function( event, ui ) {
$( this ).addClass("ui-state-highlight");
$( ".card02" ).addClass('dropped');
}
});
});
Só que não quero ter que repetir o draggable e droppable no para cada card que criar, não tem algum jeito de fazer isso usando o data ? por exemplo criando um data-acerto.