Можно ли написать этот код jquery короче? (новичок)

Question

Это мой первый раз, когда я спрашиваю что-то в stackoverflow, поэтому простите меня, если я что-то сделаю неправильно. Я также новичок в jquery, но через чтение и учебники мне удалось создать рабочий пример.

Код ниже - это то, что я создал. Смысл этого в том, что у меня есть три списка с перетаскиваемыми требованиями и три заполнителя, где требования могут быть отброшены. Идея заключается в том, что placeholder 1 принимает только элементы из списка 1, placeholder 2 только из списка 2 и placeholder 3 из списка 3. Когда требование перетаскивается, заполнитель будет подсвечен, чтобы пользователь знал, где его можно отбросить.

Так что теперь на вопрос: есть ли способ обрезать этот код? У меня такое ощущение, что это не лучший способ, это три раза тот же код, что и только два слова, которые меняются. Как я узнал из учебников: Никогда не пишите вещи два раза.

Также возникает вопрос: возможно ли, когда требования помещаются в заполнители для создания линии между ними? Я хотел бы, чтобы пользователь щелкнул по одному заполнителю и нажал на другой заполнитель, чтобы нарисовать соединение. Я уже видел много примеров с html5 canvas и jsPlumb, но мне не нужны все эти функции. Только одна строка между заполнителями при нажатии.

$(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"); 
    }  
}); 

Как сказано, я новичок в jquery, поэтому хорошие объяснения приветствуются. Заранее спасибо!

Роб

Answer 1

Написать функцию, которая возвращает объект, который вы повторно, вставив класс строки или любой другой параметр нужно изменить в нем:

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; 
} 

Затем вызовите его как в $(".row2 .placeholder").droppable(getSettings(".row2"). Не проверял его, но он должен работать. Изменение любой части, которая не является статичной, для параметра функции, должна быть достаточной, если вариант использования - тот, который вы описали.

Добро пожаловать в jQuery!

Answer 2

Что-то, как это должно работать

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

Как об использовании так:

$(".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"); 
     } 
}); 
    });