We Keep Coding

Making dragged and dropped element droppable while still being draggable

I have been trying to achive functionality as follows:
-you can drag and drop multiple 450x150 onto .drop_cont
-then you can drag and drop 300x150 onto 450x150
I tried adding and removing classes but it doesn't seem to work.
Is there any way to do that, probably there is some way that I didn't think of.
Demo:
jsFiddle
Sample Code:
$(document).ready(function () {
$( ".idg_row" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".idg_column" ).draggable({
helper: "clone",
appendTo: "body",
containment:"document",
revert: true,
stop: function( event, ui ) {
check();
}
});
$( ".drop_cont" ).droppable({
accept: ".idg_row",
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
$( ".droppableC" ).droppable();
});
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
}

Once you add the class, you need to recall droppable to run on the new elements.
function check() {
$('.drop_cont .idg_row').addClass('droppableC');
$('.drop_cont .idg_column').addClass('droppableC');
$('.droppableC:not(.ui-droppable)' ).droppable();
}

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 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 sortbable event

I have two lists , one is draggale and other is sortable. When i move item from draggable to sortable items recives span and in span X mark . But the problem is that when i sort items later in sortable item recives x one more time . Then i have something like Item 1 XX and again every time u sort new x ( or drag ).
How can i fix this ?
$(function() {
$( ".draggable" ).draggable({
helper: "clone",
connectToSortable: ".sortable"
});
$(".sortable").sortable({
stop: function(event, ui) {
ui.item.html(ui.item.text()+'<span class="remove">X</span>');
}
});
});

Check that there's no span.remove inside the item?
$(function() {
$( ".draggable" ).draggable({
helper: "clone",
connectToSortable: ".sortable"
});
$(".sortable").sortable({
stop: function(event, ui) {
if(!ui.item.find('span.remove').length) {
ui.item.html(ui.item.text()+'<span class="remove">X</span>');
}
}
});
});