Develop Reference

How to add Jquery Draggable funcution for elemets that are loaded with DOM?

I have Jquery code to drag and drop elements to a work_area div with works perfectly fine.
But when I try to apply the same function to a preloaded DOM element the draggable function using another draggable() function on document ready, the preloaded elements are draggable within the work area but the new elements are not.
For Better understanding here's the code:
Code to drag & drop new elements:
function dragger() {
$(".draggable").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
helper: "clone",
cursor: "move"
});
$(".draggable2").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
cursor: "move"
});
console.log("here2");
$("#work_area_div_sub").droppable({
accept: ".draggable",
containment: "#work_area_div_sub",
drop: function( event, ui ) {
console.log("here3");
ui.draggable.clone().appendTo($(this)).draggable().removeClass("draggable").addClass("draggable2");
$(".draggable2").resizable({
handles: "n, e, s, w, se, ne, sw, nw",
aspectRatio: true
});
});
}
$(document).ready(function() {
dragger();
});
Please note that the above code lets drag and drop (clones) elements with class name draggable into work_area div, which further can be draggable within the work_area div.
And works perfectly fine.
While, when I apply the same to the preloaded elements with class draggable2 using the below code:
function dragger_idle() {
$(".draggable2").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
cursor: "move"
});
$("#work_area_div_sub").droppable({
accept: ".draggable2",
containment: "#work_area_div_sub",
drop: function( event, ui ) {
console.log("here");
}
});
}
$(document).ready(function() {
dragger_idle();
});
works fine, lets me drag pre-loaded elements that are in work_area div drag around. but the first piece of code which lets me drag and drop new elements doesn't work. But if i m to remove the dragger_idle() the dragger() function executes fully.
I tried condole.log on every possible position to check how far the function is running. yet, no idea where I messed up.
At first I thought that the $("#work_area_div_sub").droppable in draggable_idle() is messing up with $("#work_area_div_sub").droppable in draggable() but consoling it out tells me that the $("#work_area_div_sub").droppable is not at all triggering when i try to drag new elements.
Hope I was clear.
Any Help is greatly appreciated.

So, after some brain storming, I figured it out.
function dragger() {
$(".draggable").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
helper: "clone",
cursor: "move"
});
$(".draggable2").draggable({
revert: "invalid",
containment: "#work_area_div_sub",
cursor: "move"
});
$("#work_area_div_sub").droppable({
accept: ".draggable, .draggable2",
containment: "#work_area_div_sub",
drop: function( event, ui ) {
if((ui.draggable).hasClass('draggable2')) { } else {
//whatever we wanna do with the new drag drop elements
}
}
});
}
So, what I exactly did was,
told the #work_area_div_sub div to accept both classes draggable and draggable2
And while adding the clone or other functions to the dropped element, added an if to check whether it's a draggable or the other.
and finally added parameters accordingly.
To be frank, although no answers rolled in, stack really did help me understand my own problem in a different way to solve it by myself by writing it down. So. thanks SO.

Jquery UI Draggable clone disappearing

I am trying to use the jquery-ui draggable to make some element draggable.
I set the helper option to clone the current element.
It's making the clone correctly but when I drop the clone disappears. It doesn't stay at the dragged place.
See this for Demo Fiddle Link
$('#drag').draggable({
helper: function (e, ui) {
return $(this).clone();
}
});
What am I missing ?

There maybe a simpler way, but through data of draggable, you can target a property that deals with this. Like this:
stop : function(e, ui){
$('#drag').draggable().data()["ui-draggable"].cancelHelperRemoval = true;
}
fiddle: http://jsfiddle.net/n10ucrLd/

I think there's been a lot of troubles with helper: 'clone'. I always got it to work, when I defined a droppable as well. E.g.:
HTML:
<div id="drag">Drag This</div>
<div class="container"></div>
JavScript:
$('#drag').draggable({
helper: function (e, ui) {
return $(this).clone(true);
}
});
$( ".container" ).droppable({
drop: function (event, ui) {
ui.draggable.clone().appendTo($(this)).draggable();
}
});
Live example: http://jsbin.com/vibeqaganu/1/edit?html,css,js,output

Drop is called when draggable is leaving nested sortable

I have Droppable div with nested Sortable and Draggable which is connected to the Sortable and is accepted by the Droppable.
<div id="droppable">
<div id="nested-sortable"></div>
</div>
<div class="draggable">
test
</div>
jQuery (2.0.2)
$("#droppable").droppable({
accept: ".draggable",
drop: function() {
console.log('Dropped'); //This should be called on drop!!
}
});
$("#nested-sortable").sortable({
placeholder: 'item',
});
$(".draggable").draggable({
connectToSortable: "#nested-sortable",
helper: "clone"
});
My problem is that when I drag the Draggable over the Sortable, drop event is triggered. I don't understand why - I haven't dropped it.
I reproduced it in this fiddle: http://jsfiddle.net/9ydp3L7q/3/
Thanks

I found a dirty workaround. I really don't like it but it seems to work alright.
I ignore drop if the helper has ui-sortable-helper (which it gets when it's over the sortable).
$("#droppable").droppable({
accept: ".draggable",
drop: function(event, ui) {
if (ui.helper.hasClass("ui-sortable-helper")) {
return;
}
console.log('Dropped');
}
});
But I have to remove the class manually on out of the sortable. If I try to just remove the class I get into and infinate loop (and javascript on the page crashes) - so I had to do it in timeout.
$("#nested-sortable").sortable({
placeholder: 'item',
out: function(event, ui) {
// this looks kind of dirty to me
setTimeout(function () {
$(ui.helper).removeClass("ui-sortable-helper")
}, 1);
}
});
Fixed fiddle: http://jsfiddle.net/9ydp3L7q/6/

Use disable for sortable while using draggable. and Use disable for draggable while using sortable.
$( ".selector" ).sortable( "disable" );
$( ".selector" ).draggable( "disable" );
or
$('.selector').draggable({
disabled: false
});
$(".selector").sortable({
disabled: false
});

drag and drop jquery not working

I'm trying to drag the boxes from the man to the top of the car, target div called 'droppable'. This seems to work when previewing from Dreamweaver but not when previewing in jsfiddle:
http://jsfiddle.net/dantest2014/9JTSQ/7/
$(function () {
var dfd1 = $.Deferred();
var dfd2 = $.Deferred();
$("#lft_box_layer").draggable({
revert: "invalid",
cursor: "move"
});
$("#rgt_box_layer").draggable({
revert: "invalid",
cursor: "move"
});
$("#btm_box_layer").draggable({
revert: "invalid",
cursor: "move"
});
$("#droppable").droppable({
accept: "#lft_box_layer, #rgt_box_layer, #btm_box_layer",
// tolerance can be set to 'fit', 'intersect', 'pointer', or 'touch'
tolerance: 'intersect',
// Add .hoverClass whenever #draggable is being hovered over #droppable
over: function (event, ui) {
$('.ui-draggable-dragging').addClass('hover');
},
// Remove .hoverClass whenever #draggable is no longer hovered over #droppable
out: function (event, ui) {
$('.ui-draggable-dragging').removeClass('hover');
},
// Add .dropClass whenever #draggable is dropped on #droppable
drop: function (event, ui) {
$('.ui-draggable-dragging').removeClass('hover').addClass('drop');
$('.ui-draggable-dragging').draggable('option', 'disabled', true);
$("#car").attr('src', "images/removals-car-break.jpg");
}
});
});
Can someone help me with this?
After the three boxes have been dragged to the top of the car I would like to trigger a change of car image and also change the text.
Any help with any part of this question would be great.
Thanks!
Dan

In order to preview it on JSFiddle you first need to implement jQueryUI (not just jQuery) on the project.
Here is the same example with jQueryUI bound into your project (and cleaned the code a little to not waste code calling the draggable for all of the elements): http://jsfiddle.net/9JTSQ/11/
$(".toDrag").draggable({
revert: "invalid",
cursor: "move"
});
$("#droppable").droppable({
accept: ".toDrag",
.....................
});
I just bound jQueryUI from its CDN in "external resources"

Drag and drop images like in a puzzle

How can i make 2 divs which contain images to drag-drop and fit each other.My code looks like :
Edit: link for project http://www.fileshare.ro/e30355196
$(function() {
$( "#right img" ).draggable
({
revert: "invalid"
});
$( "#left" ).droppable({
tolerance: 'fit',
drop: function( event, ui ) {
$(ui.draggable).clone().appendTo($("#left"));
}
});
});

Please find attached fiddle:
Hopefully this will give you a good start.. like wolff said, I aint downloading an entire project writing the whole thing..
http://jsfiddle.net/jFIT/qs3TF/1/
Best of luck with it..
$(document).ready(function () {
$('#pieces>div').draggable();
$('#puz>div').droppable({
accept: "#pieces>div",
// activeClass: "ui-state-hover", //can be cool to have these..
// hoverClass: "ui-state-active",
drop: function (event, ui) {
$(ui.draggable).detach().css('background-color', 'red').css({ //you wont need this as your classes will all stay the same.
top: 0,
left: 0,
height:100,
width: 100
}).appendTo(this);
//disable draggable on them also..
}
});
});