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

jquery

Solution

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!

Problem

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

Original source