I have elements where you can drag droppable (cloned) items. However when I drag parent items to left side, droppable/draggable is not working on clones. Is it possible to get event bindings copied to clones too? Or how can I bind events to these clones? See jsfiddle for example.
jQuery( document ).ready(function( $ ) {
$(".draggable").draggable({
helper: 'clone',
greedy: true
});
$(".droppable").droppable({
greedy: true,
hoverClass: "data-hover",
drop: function( event, ui ) {
$(this).append($(ui.draggable).clone());
$(".draggable").draggable({ helper: 'clone' });
}
});
});
http://jsfiddle.net/L9xYK/
Related
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.
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
});
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..
}
});
});
I have a cloned element which I am able to drag however I wish to drop it in a specific div element and if valid not revert back to its original position, however it is always reverting back to its original position whether it is valid or not.
I am currently using the code below:
$("ul#objectsList li").draggable({
revert: 'invalid',
snap: "#objectsDropBox",
snapMode: "inner",
helper: function() { return $(this).clone().appendTo('body').show(); },
start: function(e, ui) { $(ui.helper).addClass("ui-draggable-helper");}
});
$("#objectsDropBox").droppable({
accept: "ul#objectsList li",
drop: function( event, ui ) {
alert('hi');
}
});
Why is it not staying in the div when a valid draggable is dropped?
Try this
$("#objectsDropBox").droppable({
accept: "ul#objectsList li",
drop: function (event, ui) {
$(this).append(ui.draggable);
//if you want to retain the element use ui.draggable.html() or clone it.
}
});
Fiddle - http://jsfiddle.net/dmNhZ/
I have jquery drag and drop working so I can move one row in a table to another.
the demo is here:
http://www.aussiehaulage.com.au/Default.aspx
I use jquery-ui-1.8.22 to make my table draggable/droppable.
My javascript is :
$(document).ready(function () {
$(".draggable").draggable({
helper: function () { return "<div class='ghost'></div>"; },
start: resizeGhost,
revert: 'invalid'
});
$(".droppable").droppable({
hoverClass: 'active',
drop: function (event, ui) {
var target = $(event.target);
var draggable = ui.draggable;
draggable.insertBefore(target);
},
tolerance: 'touch'
});
});
However when i move the row, if the mouse cursor is in between 2 rows on the droppable table both droppable rows are highlighted.. I need to make it so it will only highlight 1 droppable row at a time..
is this possible?
Add a new option in your droppable element, using either tolerance fit or intersect
$(".droppable").droppable({
hoverClass: 'active',
tolerence: 'intersect',
drop: function (event, ui) {
var target = $(event.target);
var draggable = ui.draggable;
draggable.insertBefore(target);
},
tolerance: 'touch'
});
And for your reference: jquery-ui