È possibile scrivere questo codice jquery più breve? (principiante)

Question

Questa è la mia prima volta che chiedo qualcosa su StackOverflow quindi perdonami se faccio qualcosa di sbagliato. Sono anche nuovo di jQuery ma attraverso la lettura e le esercitazioni sono riuscito a creare un esempio funzionante.

Il codice seguente è ciò che ho creato. Il significato di questo è che ho tre liste con requisiti trascinabili e tre segnaposto in cui i requisiti possono essere eliminati. L'idea è che il segnaposto 1 accetta solo articoli dalla lista 1, segnaposto 2 solo dalla lista 2 e segnaposto 3 dalla lista 3. Quando un requisito viene trascinato, il segnaposto verrà evidenziato in modo che l'utente sappia dove può essere eliminato.

Quindi ora per la domanda: c'è un modo per ritagliare questo codice? Ho la sensazione che questo non sia il modo migliore, è tre volte lo stesso codice con solo due parole che stanno cambiando. Come ho imparato dalle esercitazioni: non scrivere mai le cose due volte.

Un'altra domanda: è possibile quando i requisiti vengono eliminati nei segnaposto per creare una linea tra di essi? Vorrei che l'utente clicchi su un segnaposto e clicchi sull'altro segnaposto per disegnare una connessione. Ho già visto molti esempi con html5 canvas e jsPlumb ma non ho bisogno di tutte quelle funzionalità. Solo una linea tra i segnaposto quando si fa clic.

$(function() { 
    $("#requirements").accordion(); 
    $("#requirements ul li").draggable({ 
    appendTo: "body", 
    helper: "clone" 
}); 

$(".row1 .placeholder").droppable({ //makes row1 .placeholder a droppable area 
    accept: "#requirements .row1 li ", 
    activeClass: "ui-state-hover", 
    drop: function(event, ui) { 
     var $this = $(this); 
     $("<li></li>").text(ui.draggable.text()).appendTo(this); 
     $this.droppable('disable').addClass("highlighted"); 
    } 
}); 

$(".row2 .placeholder").droppable({ //makes row2 .placeholder a droppable area 
    accept: "#requirements .row2 li ", 
    activeClass: "ui-state-hover", 
    drop: function(event, ui) { 
     var $this = $(this); 
     $this.find(".placeholder").remove(); 
     $("<li></li>").text(ui.draggable.text()).appendTo(this); 
     $this.droppable('disable').addClass("highlighted"); 
    } 
}); 

$(".row3 .placeholder").droppable({ //makes row3 .placeholder a droppable area 
    accept: "#requirements .row3 li ", 
    activeClass: "ui-state-hover", 
    drop: function(event, ui) { 
     var $this = $(this); 
     $this.find(".placeholder").remove(); 
     $("<li></li>").text(ui.draggable.text()).appendTo(this); 
     $this.droppable('disable').addClass("highlighted"); 
    }  
}); 

Come detto Sono nuovo di jQuery così buone spiegazioni sono i benvenuti. Grazie in anticipo!

Rob

Answer 1

scrivere una funzione che restituisce l'oggetto che si sta riutilizzando, inserendo la classe riga o qualunque parametro deve cambiare in esso:

function getSettings(rowClass){ 
    var obj ={ //makes row1 .placeholder a droppable area 
     accept: "#requirements "+rowClass+" li ", 
     activeClass: "ui-state-hover", 
     drop: function(event, ui) { 
     var $this = $(this); 
     $("<li></li>").text(ui.draggable.text()).appendTo(this); 
     $this.droppable('disable').addClass("highlighted"); 
     } 
    } 
    return obj; 
} 

Poi lo chiamano come in $(".row2 .placeholder").droppable(getSettings(".row2"). Non l'ho provato, ma dovrebbe funzionare. Cambiare qualsiasi parte che non è statica per essere un parametro di funzione dovrebbe essere sufficiente se il caso d'uso è quello che hai descritto.

Benvenuti in jQuery!

Answer 2

Qualcosa del genere dovrebbe funzionare

var rowArr = [".row1", ".row2", ".row3"]; 
$(rowArr).each(function(curr) { 
    $(curr + " .placeholder").droppable({ 
     accept: "#requirements " + curr + " li", 
     /*rest of the code remains the same*/ 
    }); 
}); 

Answer 3

ne dite di usare in questo modo:

$(".row1 .placeholder, .row2 .placeholder, .row3 .placeholder").droppable({ //makes row1 .placeholder a droppable area 
var rowClass = [".row1",".row2", ".row3"]; 
$(rowClass).each(function(thisrow){ 
    accept: "#requirements" + thisrow + "li ", 
     activeClass: "ui-state-hover", 
     drop: function(event, ui) { 
      var $this = $(this); 
      $("<li></li>").text(ui.draggable.text()).appendTo(this); 
      $this.droppable('disable').addClass("highlighted"); 
     } 
}); 
    });