How does one select an original of a draggable element?

JavaScript and client side scripting.

Moderator: General Moderators

How does one select an original of a draggable element?

Postby drayarms » Mon Jul 09, 2012 4:13 pm

Hello, i'm using jquery draggable method to move an element to a new container. I want the original element to disappear once the dragging begins and have a clone of the original to be dragged instead. Then once is clone is dropped into droppable, I want the original to reappear in a third container and the clone to dissappear. I'm stuck at stage 1, (ie making the original to dissapar). Problem is, I don't know how to select the object representing the original. Here's what I've tried. I've also $(this).hide() in place of ui.draggable.hide(), but none of that works. Any ideas? Thanks.

Syntax: [ Download ] [ Hide ]

function drag(){

        $('#drag_box > img').draggable({//Elements to be dragged are image elements contained in #drag_box

                helper: 'clone',

                revert: true,

                dragStart: function(event, ui){

                        ui.draggable.hide();//This line is supposed to hide the original


        });//end draggable method


                accept: '#drag_box img',  

                drop: function(event, ui){

                        ui.helper.remove();//Removes the clone from the DOM


        });//end droppable method

}//End drag

Forum Contributor
Posts: 132
Joined: Fri Dec 31, 2010 6:11 pm

Re: How does one select an original of a draggable element?

Postby avibitton » Wed Jul 18, 2012 4:54 pm

can you send simple html code of what you want do ?
i guess the clone is display :none ; by deatult and than you do show () ,right? (dont forget you can use addClass and remove class its very usefull when you do css to #drag use add class and do #drag.vis {visibility:hidden;} and than change css to visibilty visible im not sure remove class will help to cancel the hidden but .css("visibility","visible"); should work
try to do $(this).css("visibility","hidden"); //it will change its css to hidden when you want another event change the css to visible .
.in same css you can add class for the close to be visiable than you hide object1 and make visible object2 .
hope it helps a little bit .
Forum Newbie
Posts: 18
Joined: Sat Jul 14, 2012 4:35 pm

Return to Javascript

Who is online

Users browsing this forum: No registered users and 4 guests