Page 1 of 1

How does one select an original of a draggable element?

Posted: Mon Jul 09, 2012 4:13 pm
by drayarms
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.

Code: Select all


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


	$('#drop_box').droppable({

     		accept: '#drag_box img',  


		drop: function(event, ui){

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

		}

	});//end droppable method





}//End drag 



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

Posted: Wed Jul 18, 2012 4:54 pm
by avibitton
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 .