I'm trying to add a parameter to a div once its dropped onto a droppable.
Is there a method which resembles addParameter below which can add the paramter ?
$( ".placeHolder" ).droppable({ drop: function( event, ui )
{
"#"+this.id.addParameter(myParam="testParam");
}
Use the .attr() function. To set the attribute use
$(this).attr('my_attribute', 'my_value');
and to get it use
$(this).attr('my_attribute');
If you mean setting the attribute to the draggable element, then you can use:
$(".placeHolder").droppable({
drop: function(event, ui) {
ui.draggable.attr("myParam", "testParam");
}
});
Otherwise, just use ui.draggable as a jQuery object of the draggable element.
Related
I want it to be possible to drag (draggables) several HTML elements into several other HTML elements. (droppables)
I found the jQuery UI draggable/droppable.
Currently, I define all li elements inside an ul as draggable. I also have three divs which accept all the draggable li elements.
<ul>
<li>foo</li>
<li>bar</li>
<li>baz</li>
</ul>
Defining them as draggable:
$('li').draggable({ revert: 'invalid' });
My droppable divs:
<div class="droppable" id="div1"></div>
<div class="droppable" id="div2"></div>
<div class="droppable" id="div3"></div>
Make the divs droppable:
$('div.droppable').droppable({ accept: 'li', drop: funcDrop, out: funcOut });
I now want that only one li element can be dropped into a div at the same time. I am trying to do that by disabling the droppability inside the div element I dropped the draggable, like so:
funcDrop = function(event, ui) {
$(this).droppable('disable');
}
This works. Now I am not able drop any further li elements into this div. The problem is, how/when to enable the div again? Clearly if the contianing draggable was removed. So I tried to enable the div inside funcOut:
funcOut= function(event, ui) {
strIdValue = event.target.id;
$('#' + strIdValue).droppable('enable');
}
But this does not work.
It seems also that I can't work with $(this) selector inside the funcOut.
Does anyone have a hint?
Best regards
I use jQuery 2.1 and UI 1.10.4
I figured out an alternative solution:
It seems if an element once was disabled, the out event does not fire and I am therefore not able to enable it again using the element itself. So what I did, is this:
If you drop a draggable element on a droppable element, the drop event is triggered and does this:
$(this).droppable({ accept: ('#' + $(ui.draggable).attr('id')) });
So the droppable is not disabled, but accepts only the received draggable by its unique HTML id. Because it is not disabled the out event will now be triggered. This is what I do in it:
$(this).droppable({ accept: 'li' });
Now the droppable accepts all HTML li elements as ever. Now each droppable accepts only one draggable. The droppable is now "locked" if it receives a draggable.
I wonder if this is a valid solution or just a dirty hack.
(Possible duplicate/related: jQuery UI - Droppable only accept one draggable)
Based on the JSFiddle you've shared (which currently is not doing what you asked), here is a modified version of the droppable function that you can use to achieve the desired result:
$(".droppable").droppable({
accept: "li",
drop: function(event, ui) {
$(this).droppable('option', 'accept', ui.draggable);
},
out: function(event, ui){
$(this).droppable('option', 'accept', 'li');
}
});
As the other answer stated, the trick is to make our droppable div accept 'ui.draggable', being ui the item that is currently being dragged to our droppable div.
Hope that helps!
(EDITED: Grammar)
I am using jquery draggable and I am handling the stop event. I need to know the ID of the LI element that was dragged in. How do I do that?
ui object has .helper property, which represents dragged jQuery object. You can retrieve element's id from it in this way:
stop: function(event, ui) {
alert( ui.helper[0].id ); // here it is
}
DEMO
The target property of the event should be the draggable:
stop: function(event, ui) {
console.log(event.target.id); // Assuming it has an ID
}
Live example | source
I have this problem:
When a menu element (using the sortable plugin) is being dragged and hovers another element, a function is supposed to start. I see that while the sortable plugin is initialized it ignores the hover functions written elsewhere in the code.
How can i make it fire the hover function while I'm dragging an element and I hover over the intended element?
Thanks a lot!
You will need to use the sortable over event:
Supply a callback function to handle the over event as an init option.
$( ".selector" ).sortable({
over: function(event, ui) { ... }
});
Bind to the over event by type: sortover.
$( ".selector" ).bind( "sortover", function(event, ui) {
...
});
$("#sortable").sortable({
over: function(event, ui) {
alert( 'The Sortable Over Event Just Fired!!' );
}
});
I have a draggable element with the helper: 'clone' set, but when it clones the element, none of the data() or events are persistent in the new element.
I've tried a number of ways to reattach the data(), but I can't seem to select the new element as well as the old element in the same statement.
For instance, I can select the initial element in the draggable stop() event:
$blah.draggable({
helper: 'clone',
stop: function(ev, ui) {
var oldData = $(ev.target).data('blah');
}
});
And I can also get the new element in the droppable drop() event:
$blah.droppable({
drop : function(ev, ui) {
var $newElement = ui.draggable;
}
});
But I can't figure out a way to get both in the same event.
What I'd like to do is somehow transfer the data, e.g.:
$newElement.data('blah', $oldElement.data('blah'));
Or otherwise make the data persistent, like you can with $blah.clone(true);
To get access to the data of original element in drop you can use ui.draggable.context. In the example below context would refer to the original dragged element and you have access to all of its content. Draggable refers to the new element that is being dropped.
$("#droppable").droppable({
drop: function(ev, ui) {
console.log(ui);
console.log(ui.draggable.context);
console.log($(ui.draggable.context).data('pic'));
}
});
I haven't worked too extensively with droppable, but couldn't you just do something like this?
$(".draggable").draggable({
helper: 'clone'
});
$("#droppable").droppable({
drop: function(ev, ui) {
$(this).append(ui.draggable.clone(true));
}
});
Seems to work unless there's something I'm missing:
http://jsfiddle.net/hasrq/
Turns out the problem was sortable, not draggable / droppable (I was attaching sortable later on, but figured it wasn't part of the problem here so I left it out of the original question).
I ended up using sort of a combination of #kingjiv's solution above, along with a not-the-greatest hack but at least it seems to be working:
$blah.sortable({
receive: function(ev, ui) {
// setting a global variable here
MyGlobals.cloneCache = ui.item.clone(true);
},
stop: function(ev, ui) {
$(ui.item).replaceWith(MyGlobals.cloneCache);
}
});
The idea is that you first clone the original item in the receive() event, cache this in a variable, and then replace the item with that in the stop() event.
Kind of ugly but at least it's working.
ui.item refers to dragged item. When the dragged item is cloned, there is no built-in way to access the target item from receive function. However, there is a bit hacky way how to do it:
$blah.sortable({
receive: function (ev, ui) {
var $target = $(this).data().sortable.currentItem;
var $source = $(ui.sender);
// now you can copy data from source to target
$target.data('data-item', $source.data('data-item'));
}
});
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