Hi all,
First post, taking my first leap into jQuery, bought some books!
What I am aiming to achive is a drag and drop interface for a calendar
(the
fact it is for a calendar is pretty irrelevant actually). So I have a
number
of items in a list (places) and I would like to be able to drag these
places
into a certain time slot on a day planner-style calendar.
Once the "place" has been dragged onto a specific time slot it cannot
be
dragged onto the calendar again (so I am currently cloning it and
setting
.draggableDisable). The cloned place is now on the calendar, all
working
great, until I want to make that cloned element draggable, so it can
be
moved up and down the calendar so the user can change the time. The
user can
also drag more places on the calendar, and shuffle them around to his
heart's content. This is where I am stuck.
Here is my code so far:
(my "places" all have the class of draggable, and the individual time
slots
on the calendar are all classed as droppable)
$(".draggable").draggable({
helper: 'clone',
ondrop : function() {
$(this).css("background-color","#999999");
}
}
);
$(".droppable").droppable({
accept: ".draggable .dropped",
tolerance: 'pointer',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
$(ui.draggable.element).removeClass("draggable").addClass("draggable-
disabled").draggableDisable();
var droppedID = $(ui.draggable.element).attr("id");
// change id of original element
$(ui.draggable.element).attr("id").droppedID+"_x";
var zoneID = this.id;
theText = $(ui.draggable.element).text();
$('<div class="dropped"
id="'+droppedID+'"><h1>'+theText+'</h1></div>').appendTo($(this));
}
});
Once the element has been dropped, it is no longer draggable.
I am not asking anyone to do this for me, just some pointers in the
right
direction would be really appreicated as I am going round and round in
circles at the moment.
Many thanks in advance!
