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 drag n drop, not allow drop on clone drop container

try to drag item and drop to clone div, but it's not working. it's seem like jquery drag n drop not allow to drop on clone item.
drag n drop working on first one, after i click add more dropzone, and try to drop item to new dropzone. it's not allow to.
here is my jsfiddle
$(document).on("click", ".add_dropzone", function(e){
$('<div class=\"dropzone\"></div>').insertAfter($('.dropzone').last());});
$( "ul li" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".dropzone" ).droppable({
activeClass: "active",
hoverClass: "ui-state-active",
tolerance: "touch",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "ui-state-highlight" );
if($(ui.draggable).hasClass('draggable-source'))
$( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');
else
$( ui.draggable ).appendTo( this );
$('.delete').on('click', function () {
$(this).parent().parent().parent().parent('li').remove();
});
//alert($(this).text());
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
Any help will be greatly appreciated!

How about this
I have moved the initializing code to a function
Final code will look like
$(document).on("click", ".add_dropzone", function (e) {
$('<div class=\"dropzone\"></div>').insertAfter($('.dropzone').last());
initDroppable();
});
$("ul li").each(function () {
$(this).draggable({
helper: "clone"
});
});
initDroppable();
function initDroppable() {
if (typeof window.dropElem != "undefined") window.dropElem.droppable('destroy');
window.dropElem = $(".dropzone").droppable({
activeClass: "active",
hoverClass: "ui-state-active",
tolerance: "touch",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui) {
var targetElem = $(this).attr("id");
$(this).addClass("ui-state-highlight");
if ($(ui.draggable).hasClass('draggable-source')) $(ui.draggable).clone().appendTo(this).removeClass('draggable-source');
else $(ui.draggable).appendTo(this);
$('.delete').on('click', function () {
$(this).parent().parent().parent().parent('li').remove();
});
//alert($(this).text());
}
}).sortable({
items: "li:not(.placeholder)",
sort: function () {
$(this).removeClass("ui-state-default");
}
});
}

jQuery Drag/Drop Example: Ordered List does not look like ordered list at the destination

I can drag and drop, it works very good. But at the destination place the ordered list does not work properly. It should look like a ordered-list not like a pile. The destination box should grow with new element, but it does not work too.
Where is my mistake? Here is the code: http://jsfiddle.net/QJ54x/
That's the jQuery-Code so far:
$( init );
function init () {
$('.draggable1').draggable ({
containment: "#ddSurvexFormDragDropArea",
scope: "d1",
stop: draggable1Stop,
helper: "clone",
});
$('#droppable1').droppable({
scope: "d1",
accept: ".draggable1",
hoverClass: "droppable1HoverClass",
drop: droppable1Drop,
});
}
function draggable1Stop(event,ui) {
// alert ('draggable1Stop');
// $(this).remove();
ui.helper.clone().appendTo($(this).parent());
$(this).remove();
}
function droppable1Drop (event, ui) {
}

OK, I got it, here is the answer (another simplified example):
http://jsfiddle.net/cKs5u/
That's the corresponding part:
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
})
given by example from jquery-api online.

jQuery UI Draggable on droppable element

I have been trying to put a Draggable element on Droppable element, by jquery ui, and i almost succeded as the code working halfly, if you move a little the elements on the droppable, they are changing their place, and i don't want it to, i want they will stay where they are, but if you drag them outside of the droppable area, they will come back to their natural place.
the code i've done:
HTML:
<div class="cart">
<div class="products on">1</div>
<div class="products on">2</div>
</div>
<div class="products">3</div>
<div class="products">4</div>
<div class="new"></div>
Jquery:
$(function() {
$(".products").draggable({
appendTo: "body",
revert : function(event, ui) {
if($(this).attr("class").split(' ')[1] == 'on') {
$(".new").append($(this)); $(this).removeClass("on"); return !event;
}else{
$(this).data("uiDraggable").originalPosition = {top : 0,left : 0}; return !event;
} },
start: function(event, ui) { ui.helper.data('dropped', false); },
stop: function(event, ui) {
if(!ui.helper.data('dropped')) {
$("#"+$(this).html()).remove();
}
}
});
$(".cart").droppable({
drop: function( event, ui ) {
var text = ui.draggable.html();
$(".cart").append('<div id="'+text+'">'+text+'</div>');
ui.draggable.data('dropped', true);
}
});
});
http://jsfiddle.net/yreKf/8/

just remove destroy draggable on drop event here is working jsfiddle
drop: function( event, ui ) {
var text = ui.draggable.html();
$(".cart").append('<div id="'+text+'">'+text+'</div>');
ui.draggable.data('dropped', true);
$(ui.draggable).draggable({
revert: "invalid"
});
}

This might be the answer you are looking for
http://jqueryui.com/droppable/#revert
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});

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/