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"
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 am new to Jquery and I am having some problem with my code. My program has a container and a small menu below. I have some img elements class piece that I can drag to my container and move around. I want to drop some other img element class cap inside my dragged piece items but when I drop the cap over the piece it didn't show up. When I see the console log I can see that the element has a child element but I cannot see it. What do you think is my problem?
var x = null;
$( function () {
$(".piece").draggable({
cancel: "a.ui-icon",
revert: "invalid",
helper: 'clone',
containment: '#container',
});
$(".piece").droppable({
accept: ".cap",
drop: function( event, ui ) {
x= ui.helper.clone();
x.appendTo(this);
}
});
$(".cap").draggable({
cancel: "a.ui-icon",
helper: 'clone',
containment: '#container',
});
$("#container").droppable(
{
accept : ".piece",
drop : function(event, ui)
{
x = ui.helper.clone();
x.css("width", 200);
x.css("height", 200);
x.draggable({
containment: '#container',
cursor: 'move',
});
x.appendTo(this);
x.droppable({
accept: ".cap",
drop: function( event, ui ) {
x= ui.helper.clone();
x.css("width", 200);
x.css("height", 200);
alert(' was dropped onto me!' );
x.appendTo(this);
console.log("this");
console.log(this);
}
});
ui.helper.remove();
}
});
});
I expect the output to be the cap over the piece but the cap didn't show over the piece. You can see the fiddle at: https://jsfiddle.net/littletrives/6ktub3a9/
Your code is placing the cap inside the piece correctly, as you have noticed.
The problem is that <img> elements can not contain elements (source: img specification, content model nothing specification). Because your cap <img> is inside of the piece <img>, it is not displayed.
A solution could be to add a <div> with the src of the piece as a background-image instead of adding it as an <img> tag. That way, you could add the cap <img> inside of it.
I made a fork of your jsfiddle with a small example: https://jsfiddle.net/tp7e2no1/1/
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();
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/