Возможно ли записать этот код jquery короче? (Для начинающих)

Это мой первый раз, когда я спрашиваю что-то о 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, поэтому хорошие объяснения приветствуются. Спасибо заранее!

Rob

Ответ 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!

Ответ 2

Что-то вроде этого должно работать

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

Ответ 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");
         }
});
    });