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..
}
});
});
Related
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
});
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();
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"
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'm trying to optimize response time on a page with a "large" table that is a jquery droppable that accepts ~6 draggables. Like others I've seen poor response time when making each of the droppables. I've read both this post and this post, but I can't seem to get my code to work.
My basic problem is I don't know how to get a reference to the element in which the draggable was dropped. It seems the only element I can get access to is the actual draggable.
Here's how I've defined my jquery code:
$( "#grid table" ).droppable({
//disabled: 'true',
//activate: function (event, ui) {
// console.log("Activated table")
//},
//over: function (event, ui) {
// console.log("Dragged over")
//},
//activeClass: "ui-state-default",
//hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
tolerance: 'pointer',
drop: function( event, ui ) {
console.log("draggable DROPPED!!!");
//$( this ).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
var cell = document.elementFromPoint(event.pageX - $(window).scrollLeft(), event.pageY - $(window).scrollTop());
console.log('Dropped cell is'+cell);
console.log(ui.position)
console.log(ui.offset)
console.log(document.elementFromPoint(ui.position.left, ui.position.top))
$(cell).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
console.log('Setting background to:'+ui.draggable.attr("colorValue"));
}
Any help you can provide is much appreciated.
$(this) in drop: function( event, ui ) refers to the element in which the draggable was dropped