I have an image that I drag from one part of the page and drop into a DIV. No problem. But when I just drag the image around inside its new DIV home, I still trigger the DIV's drop handler. Is there an easy way to disable the drop handler for elements that are already in the droppable?
Thanks
You can add a class to the dropped element, then in the drop function check if the element have that and if so exit the drop function.
In my example I clone the element in a new one on drop, if you use the dragged you must change the selected element.
Code:
$(document).ready(function () {
$(".doodad").draggable({
helper: 'clone',
scroll: true
});
$(".dropped").draggable({
containment: ".box"
});
$(".box").droppable({
accept: ".doodad",
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function (e, ui) {
if ($(ui.draggable).hasClass('copied')) return
alert('dropped');
var droppedItem = $(ui.draggable).clone().addClass('copied').css({
position: "relative",
top: $(ui.helper).position().top - $(this).position().top,
left: $(ui.helper).position().left - $(this).position().left
}).draggable({
containment: ".box"
});
$(this).append(droppedItem);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/hLxAd/
Related
Spelling app. I have a bunch of letter tiles, user clicks a tile and drags it (a clone) down to spell a word. But they can currently drop them ONTO the tiles they're supposed to be choosing from (div "#tiles"). I have it set up so that if they drag them BACK there, they disappear, but I can't figure out how to destroy them on that initial drag.
putting $(ui.helper).remove(); and ui.remove(); together in my droppable : drop solves it, makes the cloned tile disappear. But it also destroys the functionality of the original tile (it's still visible but no longer draggable).
$(function() {
$('.tiles').draggable({
helper: "clone",
snap: true,
scroll: false,
containment: 'window',
snapTolerance: 30,
start: function(e, ui) {
ui.helper.addClass("clones");
}
});
$('.tiles').bind('dragstop', function(event, ui) {
$(this).after($(ui.helper).clone().draggable({
snap: true,
snapTolerance: 30,
scroll: false,
containment: 'window',
classes: {
"ui-draggable": "clones"
}
}));
});
$('#optionbar').droppable({
accept: ".tiles",
drop: function(event, ui) {
$(ui.helper).remove();
}
});
$('#tiles').droppable({
accept: ".tiles, .clones",
drop: function(event, ui) {
console.info("inside2");
$(ui.helper).remove();
// ui.remove(); //this makes it vanish (yay) but also kills it (oops)
}
});
});
On first drag the cloned tile isn't removed. If I pick up the same tile and drag it again, it is. I want them to be destroyed on FIRST drag if they are dropped inside #tiles, but I need my original unmoved tile to remain.
I have a simple drag and drop using jquery ui. I want to clone the element and drop the clone at the cursor position.
$(function() {
$( "#draggable" ).draggable({
grid: [ 20, 20 ],
//helper: 'clone',
});
$("#dropzone-panel").droppable({
drop: function(event, ui) {
console.log("Drop Event Fired");
}
});
});
I can drag the element and when I drop it, it stays in the correct position.
But I don't want to move the original, I want to clone it, and then drop the clone in place.
I tried calling clone and adding an appendTo in the drop function, but this just appends it to the end of the #dropzone-panel, rather than leaving it in place.
Any idea what I need to do, to clone and drop at the cursor position?
I would setup the draggable with the helper option and then the droppable with the accept option. This might look like:
$(function() {
$(".draggable").draggable({
helper: 'clone',
grid: [ 20, 20 ],
appendTo: ".droppable"
});
$(".droppable").droppable({
accept: ".draggable",
drop: function(e, ui) {
var pos = ui.position;
var $obj = ui.helper.clone();
$obj.css({
position: 'absolute',
top: pos.top + "px",
left: pos.left + "px"
});
$obj.appendTo(".droppable");
}
});
});
You will want to make use of CSS to wrap your Droppable in a Div that has position: relative; to ensure that the absolute positioning of the appended element is maintained.
I've positioned 2 containers such a way that container one overlays on another. But when I drop an item onto the container one, the dropped item goes into both containers. How do I restrict that?
//JS Code:
$("div.draggable").draggable({
helper: "clone",
cursor: "move",
containment: 'body'
});
$("div.droppable").droppable({
addClasses: false,
drop: function (event, ui) {
var $draggable = $(ui.draggable),
$droppable = $(this);
$droppable.html($draggable.clone());
}
});
Demo: http://jsfiddle.net/HL8VR/
Thanks #Nal but nothing works for me, So I Created this hack.
I store some data with an element once an item is dropped onto it. Unfortunately the data is stored with both Droppables which I could not isolate.
$("div.droppable").droppable({
addClasses: false,
drop: function (event, ui) {
var $draggable = $(ui.draggable),
$droppable = $(this);
$droppable.data({'drop': true, 'draggable': $draggable});
}
});
But once the item is dropped, I could figure out which droppable I'm hovering on.
$('div.droppable').hover(function() {
if ($(this).data('drop') === true) {
$(this).html($($(this).data('draggable')).clone());
// Clears the data from both droppables to avoid duplicating the item in them
$('div.droppable').data({'drop': false, 'draggable': false});
}
});
Demo: http://jsfiddle.net/codef0rmer/AVQVs/
Hey I am using Jquery draggable droppable with table I have initialize both and its working, but the problem is the droppable area is table and the drop item is in div when I try to drop the item it show's below the table, I want the row Id on which it is placed but instead I am getting the whole table
Following are the code
JavaScript code for table
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable" ).droppable({
drop: function(event, ui) {
console.log($(this).find('tr.pen'))
$(this).append($(ui.draggable));
}
});
});
The table code is very big let me know if you can help I will happy to send you the code
I am open to any suggestion
Thank you .
If you want to drop the draggable on individual rows, then don't instantiate the droppable on the whole table but rather on the <tr>s of the table. Check if this code works for you:
$(function() {
$( "#draggable" ).draggable({ axis: "y" });
$( "#droppable tr" ).droppable({
drop: function(event, ui) {
$(this).append($(ui.draggable));
}
});
});
i want to detect to see if an element was dragged out of container.
for example:
<div id="container">
<img src="xxx.png" />
</div>
if i am drag that img element out of the div. i will remove
the img element, but i do not know how to detect when the img is out of div.
i am use jquery drag and drop library.
There is an easy way to do this.
Set child to draggable
Set parent to droppable
Set a flag which if true on drag stop removes the element
Unset this flag in the parents on drop function
child dragged out of parent == child not dropped into parent
So when you move the child around in the parent nothing happens (removeMe flag is unset) and it moves back to original position.
If you drag the child outside of the parent the removeMe flag isn't unset and the drag stop method removes the child.
javascript
$("#draggable").draggable({
start: function(event, ui) {
// flag to indicate that we want to remove element on drag stop
ui.helper.removeMe = true;
},
stop: function(event, ui) {
// remove draggable if flag is still true
// which means it wasn't unset on drop into parent
// so dragging stopped outside of parent
if (ui.helper.removeMe) {
ui.helper.remove();
}
},
// move back if dropped into a droppable
revert: 'valid'
});
$("#droppable").droppable({
drop: function(event, ui) {
// unset removeMe flag as child is still inside parent
ui.helper.removeMe = false;
}
});
html
<div id="droppable">
<p id="draggable">Drag me!</p>
</div>
thank your provides a solution.
I have found an other solution without need an outer div for this problem.
I am use "distance" option to detect how long mouse has moved, then use
"stop" option to remove element.
$(".droppable").droppable({
drop: function(event, ui) {
var obj = $(ui.draggable).clone();
obj.draggable({
distance: 100,//used to measure how far my mouse moved.
helper: 'clone',
opacity : 0.35,
stop: function(event, ui) {
$(this).remove();//remove this element.
}
}
);//obj.draggable
}//drop
})
you need to add a div outside of your container
<div id="droppableDiv">
<div id="container">
<img src="xxx.png" />
</div>
</div>
and then make it droppable by adding a function similar to:
$("#droppableDiv").droppable ({
drop: function() { alert('dropped'); }
});
instead of the alert('dropped'); part you could add a little bit of code that removes the img element from the container div.
here is a example that does some other thing but makes use of droppable and draggable objects, maybe it can help you understand how it works!
hope this helps
-Fortes