im trying to create a cork board application much like facebook's
flare app. basically there are two divs (#picker, #board). the user
selects an images/icon from the #picker div and drags it onto the
#board div. once the image has been dragged onto the #board i want the
element to be draggable within the #board div so the user can add as
many images to the board as he/she wants and more them around to set
up a sort of scrap book type feel. any image within the #board should
also come to the front when selected (z-index). the user can then save
the current state of the board and allow others to see it.
the save function was built via PHP and it simply stores the src, z-
index, and position (top, left) of the image into a MySQL database so
it can be loaded in the same spot next time the app is loaded.
i manually added a few images in the database to test the loading and
saving functions and they work fine. but the ui is not working
correctly.
heres what i have so far with comments:
<code>
$(document).ready(function() {
// all images in #board that loaded from the db need to be draggable
$(".dragImage").draggable({
containment: 'parent',
cursor: 'move'
});
// images in the #picker that are dropped into the #board
$(".dropImage").draggable({helper: "clone"});
// the container to recieve the images being drag-dropped
$("#board").droppable({
accept: ".dropImage",
activeClass: "droppable-active",
hoverClass: "droppable-hover",
// drop function
drop: function(e, ui) {
// change the image being dropped to a dragImage
$(ui.draggable).attr({class: "dragImage"});
// add the draggablility to it
$(ui.draggable).draggable({
containment: 'parent',
cursor: 'move'
});
// add it to the #board div
$(this).append($(ui.draggable));
}
});
});
var zmax = 0;
// when a dragable image is clicked, detect the curent highest
// z-index and set the clicked image to that value + 1
$('.dragImage').click(function() {
$(this).siblings('.dragImage').each(function() {
var cur = $(this).css('zIndex');
zmax = cur > zmax ? $(this).css('zIndex') : zmax;
});
$(this).css('zIndex', (zmax*1)+1);
});
</code>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
