so what's the problem?
it looks on the demo site like you fixed the earlier problem reported
on the regular jquery list a few days ago
On Oct 28, 3:26 pm, Mazureth <[EMAIL PROTECTED]> wrote:
> 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
-~----------~----~----~----~------~----~------~--~---
