Is it possible to write this jquery code shorter? (beginner)

Question

This is my first time i ask something on stackoverflow so forgive me if i do anything wrong. I am also new to jquery but through reading and tutorials i managed to create a working example.

The code below is what i created. The meaning of this is that i have three lists with draggable requirements and three placeholders where the requirements can be dropped. The idea is that placeholder 1 is only accepting items from list 1, placeholder 2 only from list 2 and placeholder 3 from list 3. When a requirement is dragged the placeholder will be highlighted so the user knows where it can be dropped.

So now for the question: Is there a way to crop this code? I have the feeling this is not the best way, it is three time the same code with only two words that are changing. As i learned from the tutorials: Never write things two times.

Also another question: Is it possible when the requirements are dropped in the placeholders to create a line between it? I would like the user to click on one placeholder and click on the other placeholder to draw a connection. I already saw a lot of examples with html5 canvas and jsPlumb but i don't need all that functionalities. Only one line between the placeholders when clicked.

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

As said i am new to jquery so good explanations are welcome. Thanks in advance!

Rob

Answer 1

Write a function that returns the object that you are reusing, inserting the row class or whatever parameter needs to change in it:

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

Then call it as in $( ".row2 .placeholder" ).droppable(getSettings(".row2"). Haven't tested it, but it should work. Changing any part that's not static to be a function parameter should be enough if the use case is the one you described.

Welcome to jQuery!

Answer 2

Something like this should work

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