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();
}

jQuery getting id of the element which is sortable

I got some div's which are sortable etc.. But they got all the same classes, so if I drag one, all the contents of the div's are hiding. I want to get 'id' of the div i'm dragging, and put it into hide and show function.
It should be like this..
jQuery code:
$("#column-right").sortable({
connectWith: ".sort",
handle: ".title",
placeholder: "salih",
cursor: 'move',
revert: 'invalid',
start: function() {
.click(function() { // I know it is wrong but it should be like this
var id = $(this).attr('id')
}
$('id').hide();
},
stop: function() {
.click(function() { // same
var id = $(this).attr('id')
}
$('id').show();
}
});
EDIT: Example my problem: fiddle

Please let me know if this is something you were looking for:
JavaScript Code
$("#column-left, #column-middle, #column-right").sortable({
connectWith: ".sort",
handle: ".title",
placeholder: "salih",
cursor: 'move',
revert: 'invalid',
start: function() {
$(this).find('.contents').hide();
},
stop: function() {
$(this).find('.contents').show();
}
});
$(".sort").disableSelection();
In general, $(this).find('.contents') will be exactly the child element (content) which you are dragging.
Also, I have merged your 3 identical methods into 1 avoiding duplicates and any mess in the code.

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 sortable modify html on creation

i have a page with 2 elements:
a list of items with draggable method
a lost of items with sortable method
i only allow dragging from list 1 to list 2, and that seems to work ok.
now, what i'm looking for is that when i drag item from list 1 to list 2 the newly created element will contain some different html then the element that was dragged. is that possible?
iv'e tried this approach but that does not seem to do to the job:
$("#list_2").sortable({
placeholder: "ui-state-highlight",
cursor: "move",
delay: 150,
forcePlaceholderSize: true,
opacity: 0.5,
scrollSpeed: 40,
receive: function( event, ui ) {
ui.item.html(ui.item.find(".hide").html());
}
});
$("#list_1").disableSelection();
$(".draggable").draggable({
connectToSortable: "#template_parts",
helper: "clone",
revert: "invalid",
stop: function( event, ui ) {
}
});
any help shall be greatly appriciated

var received = false;
$(function() {
$( ".draggable" ).draggable({
connectToSortable: "#list_2"
});
$( "#list_2" ).sortable({
receive: function(event,ui){
received = true;
},
stop: function(event,ui){
if(received){
ui.item.css('color','blue');
ui.item.html(ui.item.html()+' changed');
received = false;
}
}
});
$( "#list_2" ).disableSelection();
});
Example
http://jsfiddle.net/jd8A7/4/

If an item was not dragged to a specific location, then have it go to back to original position?

I made a quick drag and drop type menu. Basically I made it so you drag an item from a list into the trash div, and it will give you an alert saying "gone"
I want to make it so that you can't just drag the item anywhere. It has to go into the trash or ".list4" it's called, or else send it back to it's original position.
Here is the JSFiddle: http://jsfiddle.net/Gdze8/
Here is the Javascript:
$( init )
function init() {
$(".contentItem").draggable();
$(".list4").droppable( {
drop: handleDropEvent
});
}
function handleDropEvent ( event, ui ) {
var draggable = ui.draggable;
alert("Gone")
}
Also, while I'm here, would there be a way to delete the item once it goes in the "trash"?

Try this
$(".contentItem").draggable({ revert: 'invalid' });
JS Fiddle Demo

use :
$( ".draggable" ).draggable({ revert: "invalid" });
to get it back to its original position.
use:
$( "#dorp" ).droppable({
accept: ".draggable",
drop: function( event, ui ) { ui.draggable.remove(); }
});
to remove an element dropped.
HERE IS A DEMO : jsfiddle
AND YOU CAN USE { helper: "clone" } : jsfiddle2