0

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.

2
  • Por que não cria uma função para isso?
    – Woss
    Commented 20/03/2019 às 13:39
  • Poderia me dá um exemplo ?
    – Thi100
    Commented 20/03/2019 às 13:45

1 Resposta 1

2

Você pode definir uma função para isso - a final, elas existem para isso: reduzir código duplicado.

Analisando bem superficialmente o seu código, parece-me que as únicas alterações são dos elementos que são utilizados, então você pode parametrizá-los na sua função:

function dragNDropCards(card, bloco) {
    $(card).draggable({ revert: "invalid" });
    $(bloco).droppable({
        accept: card,
        drop: function( event, ui ) {
            $(this).addClass("ui-state-highlight");
            $(card).addClass('dropped');
        }
    });
}

E assim fazer:

dragNDropCards('.card01', '.bloco01');
dragNDropCards('.card02', '.bloco02');

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .