Is it possible to write this jquery code shorter? (beginner)
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
No comments:
Post a Comment