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
Related
I am using Jquery ui to do the drag and drop. I want to do something on the draggable item after I drop it.
I have something like this..
$('#drag-me').draggable({
scroll:false,
cursor:'pointer',
revert: 'invalid'
});
$('.box').droppable({
drop:function(event, ui){
//I want to append the #drag-me element to the .box. How do I do that?
//event.target -> get .box not #drag-me
$(this).appendTo(event.target)
}
})
Thanks for the help!
You're looking for ui.draggable, as per the droppable API drop event docs: http://api.jqueryui.com/droppable/#event-drop
So you would do:
$('.box').droppable({
drop:function(event, ui){
$(this).appendTo(ui.draggable)
}
});
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.
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