Related
I'm trying to use jquery draggable and droppable.
I have multiple draggables and multiple droppables on my page.
The drga and drop works fine but the issue is that when I drag and drop a div onto 1 droppable, it will get cloned in other droppables on my page as well... also, when I move the draggables inside the droppables, they get multiplied again.
To explain this issue, I've created this FIDDLE
and this is my entire code:
(function ($) {
$.fn.liveDraggable = function (opts) {
this.live("mouseover", function() {
if (!$(this).data("init")) {
$(this).data("init", true).draggable(opts);
}
});
return this;
};
}(jQuery));
$('.drag').liveDraggable({
helper: 'clone',
cursor: 'move'
});
var x = null;
$(".droppable").droppable({
drop: function(e, ui) {
var parent = $(".droppable");
var x = ui.helper.clone();
var img = $(x)
var leftAdj = (ui.position.left - parent.offset().left);
var topAdj = (ui.position.top - parent.offset().top);
if (x.hasClass("outside")) {
x.css({
left: leftAdj,
top: topAdj
});
x.removeClass("outside");
}
x.draggable({
helper: 'original'
});
x.find('.ui-resizable-handle').remove();
x.resizable();
x.appendTo('.droppable');
ui.helper.remove();
}
});
Drag the red divs onto the black divs and you should see the issue.
Could someone please advise on this issue?
Any help would be appreciated.
EDIT:
Getting close but still not quite there: https://jsfiddle.net/qkhunz8k/2/
Edit: Apparently I'm not communicating very well. Let me try this again. All of your droppables have the class droppable. As you say, of course they do. That is the purpose of the class.
However, in your code, when you say x.appendTo('.droppable'), this is the source of your duplicates. It is appending to every element which has the droppable class.
I'm not suggesting that you change or remove the droppable class. I'm not suggesting that you change all of your jquery selectors. I'm only suggesting that when you do your .appendTo, perhaps you should only be appending it to the droppable which is the target. Not all of them. Does that make sense? You can do this by doing x.appendTo(this). Just change that one line, and see if the duplicate problem goes away.
$(".droppable").droppable({
...
x.appendTo(this);
The only thing this change will do is change the number of elements your draggable gets appended to. It wouldn't cause any other changes. But I think it will solve your original problem.
As an aside, might I suggest that you would get better results by changing one other line? If you were to use the ui.draggable instead of the ui.helper, you might find that the css positioning would be a little easier to manage, and that you wouldn't need to manipulate the top and left properties so much. Just a thought.
var x = ui.draggable.clone();
updated modification of your fiddle here
My apologies if this was answered in another question, I could not find an answer specific to my problem!
I'm trying to test whether a jQuery draggable is being dropped outside of a legal droppable. This would normally be solved 90% of the time by reverting the draggable, but I don't want to do that. Instead, I want to do one thing if the draggable is dropped onto a droppable (working great!), and something else if it is dropped outside of all possible droppables (currently getting the better of me!).
In a nutshell:
jQuery('#droppable').droppable(
{
accept: '#draggable',
drop: function(event, ui)
{
// awesome code that works and handles successful drops...
}
});
jQuery('#draggable').draggable(
{
revert: false,
stop: function()
{
// need some way to check to see if this draggable has been dropped
// successfully or not on an appropriate droppable...
// I wish I could comment out my headache here like this too...
}
});
I feel like I'm missing something really obvious...thanks in advance for any help!
Because the droppable's drop event fires before the draggable's stop event, I think you can set a flag on the element being dragged in the drop event like so:
jQuery('#droppable').droppable(
{
accept: '#draggable',
drop: function(event, ui)
{
ui.helper.data('dropped', true);
// awesome code that works and handles successful drops...
}
});
jQuery('#draggable').draggable(
{
revert: false,
start: function(event, ui) {
ui.helper.data('dropped', false);
},
stop: function(event, ui)
{
alert('stop: dropped=' + ui.helper.data('dropped'));
// Check value of ui.helper.data('dropped') and handle accordingly...
}
});
I see that you already got an answer; anyway I had this same problem today and I solved it this way:
var outside = 0;
// this one control if the draggable is outside the droppable area
$('#droppable').droppable({
accept : '.draggable',
out : function(){
outside = 1;
},
over : function(){
outside = 0;
}
});
// this one control if the draggable is dropped
$('body').droppable({
accept : '.draggable',
drop : function(event, ui){
if(outside == 1){
alert('Dropped outside!');
}else{
alert('Dropped inside!');
}
}
});
I needed that because I couldn't change the options of my draggables, so I had to work only with droppables (I needed it inside the awesome FullCalendar plugin).
I suppose it could have some issues using the "greedy" option of droppables, but it should work in most cases.
PS: sorry for my bad english.
EDIT: As suggested, I created the version using the jQuery.data; it can be found here : jsfiddle.net/Polmonite/WZma9/
Anyway jQuery.data documentation say:
Note that this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.
(meaning that it doesn't work on IE prior to 8)
EDIT 2: As noted by #Darin Peterson , the previous code doesn't work with more than one drop-area; this should fix that issue: http://jsfiddle.net/Polmonite/XJCmM/
EDIT 3: Example from EDIT 2 has a bug. If I drag "Drag me!" to the bottom droppable, then drop "Drag me too" to the upper droppable and then drop "Drag me too" outside, it alerts "Dropped inside!" So, don't use it.
EDIT 4: As noted by #Aleksey Gor, the example in Edit 2 was wrong; actually, it was more of an example to explain how to loop through all the draggables/droppables, but I actually forgot to remove the alert messages, so it was pretty confusing. Here the updated fiddle.
Try to use the event "out" of a droppable element.
This is the documentation
"This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable."
If I'm right, this is what you need.
What is also possible is to create an element overlay over the whole page. If the element is dropped there you fire your event. Not the best, but I think the only way to do it. Because you need some other "droppable" item to fire these events.
The advantage of the following example, is that you don't need to change or know about the droppable code:
The draggable revert property can have a function(value){}. A value is passed as argument, indicating if helper was dropped onto an element (the drop element), or 'false' if not dropped on an element (drop outside or not accepted).
Note: you need to return the correct bool value from that
revert-function, in order to tell the helper to revert or not
(true/false). True means yes, take the helper back to its original
position, by moving it back in a slow motion (out-of-the-box). False means no, just
remove the helper abdruptly. Setting the revert property to 'invalid',
is a shortcut of saying
'yes, if dropped outside, then revert helper'
'no, if dropped on a droppable element and accepted, then kill the helper right away'.
My guess is that you can add current ui helper to draggable container with data property during start event. Then pick it up in the revert function from the data property. Then add a property to the helper, indicating if it was dropped or not. Then ultimately in the stop event, check this data property value, and do what you intended.
Order of event/function calls for draggable:
start-revert-stop
This could be an example:
jQuery('#draggable').draggable(
{
start: function(event, ui) {
$(this).data('uihelper', ui.helper);
},
revert: function(value){
var uiHelper = (this).data('uihelper');
uiHelper.data('dropped', value !== false);
if(value === false){
return true;
}
return false;
},
stop: function(event, ui)
{
if(ui.helper.data('dropped') === true){
// handle accordingly...
}
}
});
You can even return true in the revert function, and just remove the helper during the stop event instead, depending on the data('dropped') value with ui.helper.remove(). Or you could even explode it with CSS3 if you still have a bad day ;)
I add the solution I adopted since you can understand this very easily from the css classes of the object you are moving:
jQuery('#draggable').draggable({
stop: function(event, ui) {
if (ui.helper.hasClass('ui-draggable-dragging')) {
console.log('dropped out');
} else {
console.log('dropped successfully');
}
}
});
Old question and old answers mean that this "may" be a new solution. You (maybe) also wanted, as the question states, to know IF a draggable was dropped outside of a droppable. For me, in at least 95% of the cases, I don't really care IF, I just want things to go back to how they were without any changes being made WHEN that happens.
Setting revert to the string invalid accomplishes the desired behavior without any extra code or funky things to do.
$( '#draggable' ).draggable({
revert: "invalid",
stop: function( event, ui )
{
// whatever
}
});
Again, it won't tell you "if it was dropped outside of a droppable," but it will revert to the initial state if that happens.
This work for me:
<script>
$( function() {
$( "#draggable" ).draggable();
$( ".droppable" ).droppable({
drop: function( event, ui ) {
if( $(this) ){
$( "#draggable" ).draggable( "disable" );
}
},
});
} );
please help me, I know in general how to use the draggable and droppable classes, but I can not find a way to achieve this:
I have a large-sized image that I need to drag and drop into a div.
1) while dragging, instead of moving around the large-sized image, I want to use a small-sized image (I already have it, just need to change the src).
2) Once it reaches the target div, I would like to hide that dragged image and show again the large-sized image in its original place.
The only restriction is: "revert: invalid" must apply.
This is my code:
$("#big_img").draggable({
revert: 'invalid',
drag : function(e, ui){
//Change big image with a small version of it
$(this).attr("src").replace("/Large/","/Small/"); //<--this do nothing
}
});
$("#target").droppable({
drop: function(e, ui) {
alert("was added"); //<-- no problem here.
//Restore the big_img
}
});
Thank you.
I think I solved it:
Using "helper", I can achieve to use other image instead, like this:
$("#big_img").draggable({
helper: return $("<img src='"+$(this).attr("src").replace("/Large/","/Small/")+"' />");
});
I just need to center it to the mouse cursor, but that I think won't be a problem. Then,
removing the dropped element won't be a problem either. So, I won't need to restore the image as it is not really moving. :)
If you have another alternative, I will be pleased to read it.
String.prototype.replace() does not modify the source string, but returns a new, modified string. Try the following:
$("#big_img").draggable({
revert: 'invalid',
drag : function(e, ui) {
$this = $(this);
$this.attr("src", $this.attr("src").replace("/Large/","/Small/"));
}
});
Can anyone tell me how I can write a function in accept condition and then how does it finds out that what to accept and what not to accept.
For example, I want to accept div a and div b in accept condition. How can I write I through a function?
If you want the droppable to accept a selection of elements you can do something like this:
$(".droppable").droppable({
accept: function(d) {
if(d.hasClass("foo")||(d.attr("id")=="bar")){
return true;
}
}
});
This droppable will accept elements with the class "foo" or an element with the id "bar"
If I understand your question correctly, you want to conditionally accept the dropped element based on custom code. Aberon's answer is the typical case: you want to allow only certain draggable options to be dropped based on their class, and all others will revert. If that answers your question, then fine.
However, there is a case for having the revert animation happen conditionally based on something more complex than a class match. In my own project, I am using drag-drop to add users to a group. If the dropped user is already in the group, I want the user helper element to revert back. Otherwise, I go ahead with an AJAX action to insert them. This is no substitute for back-end checking, but it's nice visual feedback.
I have looked elsewhere for a simple answer to this. Note to JQuery maintainers: to me, the most straightforward way would be to add some property to the event object in the drop function, like this:
$('.target').droppable({
accept: '.valid'
drop: function(event, ui) {
if(isDropOK() == true) {
// add child here
} else {
event.revert = true;
}
}
});
Sadly that doesn't work. Here's what does "work", though: set the draggable element to always revert, and then hide the helper if the condition is met. You can get a reference to the helper by looking for the only element on the page that has the class ".ui-draggable-dragging". Here's an example, replace "isDropOK()" with your own logic:
$('.valid').draggable({
revert: true,
helper: 'clone',
opacity: 0.5
});
$('.target').droppable({
accept: '.valid'
drop: function(event, ui) {
if(isDropOK() == true) {
$('.ui-draggable-dragging').hide();
// add child here
}
}
});
So to recap, every element will always revert unless you step in on the drop event and manually hide the helper. The revert animation will still happen, but your users won't see it. It's a little hack, but the end result seems to work all right.
According to the Jquery documentation on Selectors.
All draggables that match the selector
will be accepted. If a function is
specified, the function will be called
for each draggable on the page (passed
as the first argument to the
function), to provide a custom filter.
The function should return true if the
draggable should be accepted.
Thus,
$('.selector').droppable({ accept: '.special' });
in their example will only act as if something has been dropped on it if it has the class 'special'. It looks like it can accept any Jquery selector.
In addition to Alex answer which is the best answer I found on this question, I like to add, that if you want to check for matching attributes between droppable and draggable, you can use the keyword this to access the droppable within your accept function. Here is a small example I recently used:
accept : function (draggable) {
var id_group_drop, id_group_drag;
//get the "id_group" stored in a data-attribute of the draggable
id_group_drag = $(draggable).attr("data-id-group");
//get the "id_group" stored in a data-attribute of the droppable
id_group_drop = $(this).parent().attr("data-id-group");
//compare the id_groups, return true if they match or false otherwise
return id_group_drop == id_group_drag;
}
So the draggable is only accepted, when it's id_group (remember, just an example) matches with the id_group of the droppable, otherwise the draggable would be reverted. I think this could be a very common use-case, maybe this will help someone.
This is the solution that I use:
... accept: '#diva,#divb', ...
I've figured out a solution that works based on the condition that no draggable should be placed in a droppable already occupied by another draggable:
$(".placement").droppable({
accept: function(elm) {
// only allow draggables to the placement if there's no other draggable
// in the droppable
if (!$(this).attr('isbusy'))
return true;
},
drop: function(event, ui) {
$(this).attr('isbusy', 'yeap'); // fill key with something
var draggable = $(ui.draggable[0]);
// free the draggable's previous droppable
if (draggable.attr('droppable')) {
$('#' + draggable.attr('droppable')).attr('isbusy', '');
}
// save the new draggable's droppable
draggable.attr('droppable', $(this).attr('id'));
},
});
Instead of using a class as accept, you can just use a function like
and return true if it matches your criteria
$('#mydroppable').droppable(
{
accept: function() { return true; },
drop: function () { alert("Dropped!"); }
});
This is my solution:
var foo = true;
$( ".draggable" ).draggable({
revert: function(){if(foo == true){return true;}else{foo = true;}},
});
$("#droppable").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
if($this == $that){
foo = true;
alert("this will revert the draggable back to original position");
}else{
foo = false;
alert("this will NOT revert the draggable back to original position");
}
}
});
I am using the jQuery library to implement drag and drop.
How do I get at the element that is being dragged when it is dropped?
I want to get the id of the image inside the div. The following element is dragged:
<div class="block">
<asp:Image ID="Image9" AlternateText="10/12/2008 - Retina" Width=81 Height=84 ImageUrl="~/uploads/ImageModifier/retina.jpg" runat=server />
</div>
I have the standard dropped function from their example:
$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) { }
});
I have tried various ui.id etc. which doesn't seem to work.
Is it not the ui.draggable?
If you go here (in Firefox and assuming you have firebug) and look in the firebug console youll see I am doing a console.dir of the ui.draggable object which is the div being dragged
http://jsbin.com/ixizi
Therefore the code you need in the drop function is
drop: function(ev, ui) {
//to get the id
//ui.draggable.attr('id') or ui.draggable.get(0).id or ui.draggable[0].id
console.dir(ui.draggable)
}
$(ui.draggable).attr("id")
...
The ui.draggable() does not seem to work any more. To get the id one can use
$(event.target).attr("id");
ANSWER THAT WORKS IN 2017
A lot of time has passed by, and I found that the current accepted answer no longer works.
A solution that currently works:
$('#someDraggableGroup').draggable({
helper: 'clone',
start: function( event, ui ) {
console.log(ui.helper.context)
console.log(ui.helper.clone())
}
})
Here, ui.helper.context refers to the original object you're trying to drag, and clone() refers to the cloned version.
EDIT
The above is too see which object you're dragging using the draggable() function. For detecting what draggable object was dropped in a droppable(), the following works:
$('#myDroppable').droppable({
drop: function(event, ui){
console.log(ui.draggable.context)
OR
console.log(ui.draggable.clone() )
}
})
I tried most of the above, but in the end only
event.target.id
worked for me.
redquare is right, inside your function refer to ui.draggable:
$(".drop").droppable({ accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: function(ev, ui) {
//do something with ui.draggable here
}
});
That property points to the thing being dragged.
Note that if you're using cloned "helpers", the draggable will be the cloned copy, not the original.
i got
drop: function( event, ui ) {alert(ui.draggable.attr("productid"));}
How to manipulate clone object in any jquery ui operation ?
Just target ui outer html and use normal html jquery selectors
var target_ui_object_html=$(ui.item.context).attr("your attributes");
attributes => id ,class ,rel,alt ,title or custom attr like data-name
, data-user