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.

When dropped open textarea | jQuery

I'm new with jQuery. All I want is to make sortable. When something is dropped, it hides and open textarea with save button. When the save button is clicked text from textarea writes to a paragraph.
I searched a lot and I found these fiddles:
First one
Second one
I want to 'merge' their functionality, but when I try it's not working. Here is my code:
$('#sortable').sortable().droppable({
drop: function(ev, ui){
$(ui.draggable).html('<a id="send-thoughts" href="#">Click</a><textarea name="message"></textarea>');
}
});
$('#draggables li').draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid',
cursor: 'move'
});
$('#send-thoughts').click(function()
{ var thought = $('textarea[name=message]').val();
alert(thought);
});
Here is a fiddle with my work - jsfiddle.net/CxpMn/102/ (sorry, I need more reputation to post more links). Please, help!

Several issues:
First, IDs cannot be duplicated in a page, so you need to use a class instead for #send-thoughts.
Second, you can't assign a click handler to elements that don't exist yet; so we need to delegate that event handler to an element that does exist, and target the future elements within it.
Third, we need to target the textarea that is related to the element clicked
$('#sortable').sortable().droppable({
drop: function(ev, ui){
// use class instead of ID
$(ui.draggable).html('<a class="send-thoughts" href="#">Click</a><textarea name="message"></textarea>');
}
});
// delegate event to account for future elements
$(document).on('click','.send-thoughts',function() {
// get the nearest textarea
var thought = $(this).siblings('textarea[name=message]').val();
alert(thought);
});
DEMO

The problem is that you are attaching a click handler to #send-thoughts before it is ever added to the DOM. Try something like the following:
$('#sortable').sortable().droppable({
drop: function(ev, ui){
$('#my-container').show();
}
});
$('#draggables li').draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'invalid',
cursor: 'move'
});
$('#send-thoughts').click(function()
{ var thought = $('textarea[name=message]').val();
alert(thought);
});
In your HTML put:
<div id="my-container" style="display: none">
<a id="send-thoughts" href="">Click</a><textarea name="message"></textarea>
</div>

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 a <div> and on drop unhide a hidden <div>

I'm having an issues using the Drag and Drop in jQuery. I have multiple 'buttons' that i want to effect other divs visible properties. (so drag something onto an area to un hide things)
I cant seem to get it working, anyone got any pointers?
$(document).ready(function () {
$('#btn_IncCat').draggable({
containment: '#content',
cursor: 'move',
snap: '#content',
revert: true,
revertDuration: 900,
opacity: 0.35,
});
$('#MobSelection').droppable({
accept: '.btn',
drop: function (ev, ui) {
ui.draggable.hide(1000);
ui.draggable.addClass('dropped');
drop: $('#btn_IncCat').on("drop", function (event, ui) {
$('#IncidentCatSearch').removeClass('hidden');
})
}
})
});
Above is the jQuery i'm trying to get working. Here is a Jsfiddle of an example. Any pointers would be appreciated. I know that they cant be 'buttons' to work with drag and drop so i will change the HTML to normal divs but styled to looked differently.

Not entirely sure what you would like to achieve, but based on your description, I would use sortable with connected lists and something like this would work: updated Fiddle. Hope this helps. Good luck!
JS:
$( ".row, #MobSelection" ).sortable({
connectWith: ".well",
stop: function (ev, ui) {
$('#IncidentCatSearch').removeClass('hidden');
}
}).disableSelection();

change item attribute when it change list-items container

i have 2 sortable connected list-items and i want to make the item change his attribute when it change the list container (i mean by drag and drop the item from the first list items to the second one)and here is my code:
$(".column").sortable({
connectWith: $(".column") ,
placeholder: 'widget-placeholder',
cursor: 'move' ,
helper: function (evt, ui) {
return $(ui).clone().appendTo('body').show();
},
dropOnEmpty: true,
zIndex: 10
});
$("#column2").droppable({
out: function( event, ui ) {
$(ui.item).attr("rel",'0');
},
over: function( event, ui ) {
$(ui.item).attr("rel",'1');
}
});

You've made a good start, but there are a few things that need correcting, and some issues you may not have realised:
Your items are constructed thus:
<li id="1" class="item">
<h3 rel="1">item1</h3>
</li>
so you need to set the rel for the h3 element, but the code in your jsFiddle is:
$("#column2").droppable({
drop: function( event, ui ) {
$(this).find('.item').attr("rel",'0');
}
});
so this is finding all the elements under $(this) (i.e. the droppable) that have the class item - which corresponds to all the li elements. You need to use:
ui.item.find("h3").attr("rel", "0");
Your sortable in your jsFiddle is:
$(".column").sortable({
connectWith: $(".column") ,
placeholder: 'widget-placeholder',
cursor: 'move' ,
// utiliser helper-clone pour que le sortable n'est donc pas contenue par un volet
helper: function (evt, ui) {
return $(ui).clone().appendTo('body').show();
},
dropOnEmpty: true,
zIndex: 10
});
the helper function isn't needed - you can just use helper: "clone". I have added forcePlaceholderSize: true to my solution, because it provides useful feedback to the user in showing where the droppable is going to be dropped. If ordering is not critical, you can remove it.
There is a problem with using droppable.drop and droppable.out - they do not capture events for droppables that are dropped onto the start or the end of a list (I suspect this is because the droppable has to be dropped *into* the list to trigger the events, and if you drop it at the start/end of the list, it's effectively a new position and is not within the list).
So, we can use sortable instead:
$(".column").sortable({
connectWith: $(".column"),
placeholder: "widget-placeholder",
forcePlaceholderSize: true,
cursor: "move",
helper: "clone",
dropOnEmpty: true,
zIndex: 10
});
$("#column2").on("sortreceive", function (event, ui) {
ui.item.find("h3").attr("rel", "0");
});
$("#column2").on("sortremove", function (event, ui) {
ui.item.find("h3").attr("rel", "1");
});
See my jsFiddle for a working solution.