i want to change the background of the draggable object after being dropped in the droppable division. how can i pass the current object being dropped?
assume there is #drag div and #drop div. after moving #drag into #drop div. I want to change the color of #drag div to black.
$("#drop").droppable({
drop: function(){
$(this).css('background','black');
},
});
i have no idea how to pass the dragged element into the droppable object after dragging and dropping it into the #drop div. I assumed 'this' would work. but it seems that it points to the #drop div
Try this:
...
drop: function(event, ui) {
// here ui.draggable is the object that was dragged
ui.draggable.css('background','black');
}
...
Related
I tried to disable draggable to the item when dropped on a div. So once draggable item is dropped on droppable div, it will be unable to be dragged anywhere else.
This is my code so far:
$(".div1").droppable({
drop: function (event, ui) {
ui.draggable({disabled: true});
});
I tried disabled: true but this didn't work. Can anyone help me out here?
you can add the class name 'disabled' then in the property of your class set a none.
.disabled{
pointer-events: none;
}
So every time I drag and drop an element to a div two problems happen.
1. It doesn't fit to the div. 2. It collapses when I drag and drop one element so I need a way to keep the space the element used to take intact.
https://jsfiddle.net/1yy2u8qw/
$( ".selector" ).droppable({ tolerance: "fit" }); //is this correct?
It looks like you missed <table> and .drop have height:90px - so dragged into element will overflow it. Change to min-height:90px
Here is the solution
https://jsfiddle.net/1nrouva3/2/
I'm writing an app that let's you drag elements from a column on the right, and drop them on a column on the left, and once you drop them the dragged element (a clone of it) is appended to the element where it's dropped. You can also drag and drop a class that floats the element (basically you can float the elements).
The problem is that when you drop two elements on the same container, that is: you make two siblings, and then float one of them, every new element you add to the floated element is also added to the overlapping sibling.
Check this fiddle: https://jsfiddle.net/5265cg7a/11/
$(function() {
function droppingFunc(event, ui) {
if (ui.helper.hasClass("add-elem")) {
event.stopPropagation();
$(event.target)
.append($(ui.draggable.clone().addClass("testing someHeight someMargin clearFix"))
.clone()
.html("")
.droppable({
drop: droppingFunc,
greedy: true,
tolerance: "pointer"
})
);
} else if (ui.helper.hasClass("add-class")) {
var classToAdd = ui.helper.attr("title");
$(this)
.addClass(classToAdd);
}
}
$(".drag-elem").draggable({
helper: "clone"
});
$(".drop-elem").droppable({
drop: droppingFunc,
greedy: true,
tolerance: "pointer"
});
});
Do the follwing and you´ll se the bug:
Add two siblings by dragging two times the "Add an element" button from the right column and dropping it on the left area.
Float one of them by dragging the "Float an element" button and dropping it in one of the previously created elements.
Add a new child element to the floated sibling. You'll see that a new child element is simultaneously added to the overlapping sibling.
Obviously what i want is that the dropped element only gets added to the element where its being dropped and not to any siblings.
I look forward to all your answers and i thank you in advance for all the help!!
In this fiddle you can grab and drag the black box around a circle
http://jsfiddle.net/S5AT6/
How do I get mousedown cursor(closedhand) to be displayed instead of the default cursor, when the user has grabbed the black box, but their cursor is outside of the #marker element and inside the document.
There you go: Solution on jsFiddle
Things changed:
CSS
// removed the !important flag here
cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default;
// removed the div#marker here
.mouseDown {
JS
Added this on doc ready:
$(document).on('mouseup', function(event) {
$('body').removeClass("mouseDown");
});
Added this in your mousedown function:
$('body').addClass("mouseDown");
Just apply the cursor style to the entire <html>. Updated jsFiddle
I'm creating an application that allows someone to drag clones of a shape onto a canvas and create a picture.
I want to be able to delete the shapes if they are dropped onto another div that is set to droppable.
Would this be possible?
$("#trash").droppable({
accept: '.item',
drop: function(event, ui)
{
//remove the clone that was dropped
}
});
you can delete just the element being dropped which is the clone by :
$(ui.draggable).remove();