We Keep Coding

How to make draggable element invisible while it reverting?

I have dragable element in my html. and jQuery is like this
$( ".block-33a" ).sortable({
revert: true
});
$( ".hidden_drag" ).draggable({
revert: true,
stop: function(event,ui){
//some code
}
});
by using this u can able to get my element back to the default place but it should be invincible while it is reverting. how do i do it?
UPDATE
this is my fiddle http://jsfiddle.net/Q2h2w/46/
and it will say my requirement too

I have updated the fiddle. Please have a look at it.
I have added the mouseup event to detect mouse release. Hope that will solve your purpose:
http://jsfiddle.net/Q2h2w/56/
var count=0;
$('.button_area').draggable({
revert: true,
drag: function(){
count++;
},
stop: function(event,ui){
$('.button_area').off("mouseup");
$(this).show();
},
start: function( event, ui ) {
$('.button_area').on("mouseup",function(){
$(this).hide();
});
}
});

Drag and drop function matching images

i made a dropspot for drag and drop function in a div which has image + dropspot but unfortunately my function doesnt work :( am i wrong ?
http://jsfiddle.net/6tsfh/
$(function() {
$( ".right img" ).draggable
({
revert: "invalid",
helper: 'clone'
});
$( "#dropspot0" ).droppable({
tolerance: 'fit',
drop: function( event, ui ) {
$(ui.draggable).clone().appendTo($("#dropspot0"));
}
});
});

Check this jsFiddle
I think JqueryUI library was not included in jsfiddle.
$(function() {
$( ".right img" ).draggable
({
revert: "invalid",
helper: 'clone'
});
$( "#dropspot0" ).droppable({
tolerance: 'intersect',
drop: function( event, ui ) {
$(ui.draggable).clone().appendTo($("#dropspot0"));
}
});
});

Jquery UI draggable and droppable with option of resizing and sorting

Here is my code on Jsfiddle: http://jsfiddle.net/sachinprasad/753KX/1/.
Here is my jquery code:
$(function() {
$("#sortable").sortable({
revert : true
});
$(".draggable").draggable({
connectToSortable : "#sortable",
helper : "clone",
revert: function(valid) {
if(valid) {
//alert("Valid");
$("ul#sortable li").resizable();
$("#sortable").sortable({revert : true });
$("ul, li").disableSelection();
}
return !valid;
}
});
$("ul, li").disableSelection();
$("ul#sortable li").resizable({
});
/* $( "#sortable li" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" );
return false;
}
}); */
});
The droppable doesn't seem to be working as even if I'm comment the droppable, its functionalities remains same.
What I have to do is:
Make item1,item2 .... as drop containers where facebook or twitter items can be dropped but only one at a time.Eg If twitter is dropped it should not allow any other items to be dropped and even twitter.
Make the dropped items sortable and users can also resize the items.
Any help will be greatly appreciated.

Jquery ui connections of dynamically made elements not works

I have some elements like this:
$("#select_h").draggable({
connectToSortable:".group",
helper: "clone",
revert:"invalid"
});
$("#datepick_h").draggable({
connectToSortable:".group",
helper: "clone",
revert:"invalid"
});
$("#group").draggable({
connectToSortable:".group, .fc",
helper: "clone",
revert:"invalid",
stop: function() {
updateConnections();
});
So, they are dragging to Sortables like this:
$( ".group" ).sortable({
connectWith:".group",
receive: function(event,ui) {
$(newItem).css("color","cyan");
},
beforeStop: function (event, ui) {
newItem = ui.item;
}
}).disableSelection();
all works, but dragged groups don't recieves elements and working different from groups made on the first build of page.
Tried to update connections:
function updateConnections() {
$("#select_h").draggable( "option", "connectToSortable", ".group" );
$("#datepick_h").draggable( "option", "connectToSortable", ".group" );
$("#group").draggable( "option", "connectToSortable", ".group, .fc" );
$(".group").sortable( "option", "connectWith", ".group" );
}
after dragging a group element, but nothing changes.
That's the solution?

Jquery Always Revert Draggable Object Valid

I have a drag and drop example that reverts a draggable object back to it's original position when it is dropped in a droppable div.
My problem is that when revert is on valid on my draggable objects I am able to drag the objects to a different position on the page, My draggable objects only revert back when I drop them into the droppable div.
I want my draggable objects to revert back regardless of where on the page you drag them to?
I have tried this which works but does not work.
{
revert: 'vaild',
stop: function(){
$(this).draggable('option','revert','invalid');
}
My problem here is that my draggable objects revert but no not revert when I drop them into the droppable div.
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var dragElemId = ui.draggable[0].id;
var imgPath = $('#' + dragElemId).attr("des-image");
$( this )
.find( ".drop-image" ).removeAttr("src").attr("src",imgPath);
}
});
});
</script>

Setting the revert property to true will cause them to always revert.
$( "#draggable" ).draggable({
revert: true
});
$( "#draggable1" ).draggable({
revert: true
});
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
//ommited for brevity
}
});
Working Example: http://jsfiddle.net/yLuvv/