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)
}
});
Related
I have a set of jquery UI draggables that are connected to a sortable via helper: 'clone'. In the receive event of the draggable I want to access the element that just got put into the list, but there does not seem to be any way of doing this.
My code is similar to this:
$('#drag li').draggable({
helper: 'clone',
revert: 'invalid',
connectToSortable: '#sort'
});
$('#sort').sortable({
receive: function(evt, ui) {
ui.item.css('color', 'green');
ui.helper.css('color', 'green');
}
});
ui.item refers to the original draggable, pre-clone, while ui.helper seems to not exist anywhere in the document after the item has been dropped.
See this jsfiddle for an example: http://jsfiddle.net/KSuPX/
Update: Sorry if my actual question is a bit unclear. A summary:
When the sortable list receives a new element, how do I access that element?
Sortable and draggable are 2 different widgets and maybe you would need edit the .js file if no solution works. And unfortunately jQuery UI does not provide detailed examples on how these functions work. You could try using the option 'sender' under receive as mentioned here - http://api.jqueryui.com/sortable/#event-receive
I am working with jQuery UI Sortable plugin, and applying it to a table. How would I trigger a function when dropping whatever element I am dragging? Something similar to below:
alert($(this).attr('id'));
Full Solution
For this, you have to set the container id's to something_number (something_1, something_2, etc).
$(function(){
$('#sortable').sortable({
placeholder: 'ui-state-highlight',
update: function(event, ui){
var order = $('#sortable').sortable('serialize');
alert(order);
}
});
$("#sortable").disableSelection();
});
This can be done easily be using stop event. Details are documented here.
Quick example:
$( "#your-id" ).sortable({
stop: function(event, ui) {
alert($(this).attr('id'));
}
});
You can alternatively give a try to other events like update depending on what are you needs exactly.
Hey, I'm trying to work out what event I need to bind to and what property I need to use to get a reference to the DOM element for the dropped item (That is the item in the receiving list.
Here's what I have so far...
<ul id="toolbox">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ul id="existing">
</ul>
<script language="javascript">
$('#existing').sortable({
revert: true
});
$('#toolbox li').draggable({
connectToSortable: '#existing',
helper: 'clone',
revert: 'invalid',
});
</script>
My objective is to turn, for example, A into something else once it's dropped into the #existing ul (Anything else will suffice - the real implementation is far more complex. I just need to get my hands on that DOM element).
I have tried the following as the receive for my sortable:
function receive(ev, ui)
{
$(this).append('<b>this</b>');
ui.sender.append('<b>sender</b>');
ui.item.append('<b>item</b>');
}
But this appears to be the #existing UL, sender and item are both the li that was dragged in toolbox. What I'm looking for is the newly created li inside #existing. Is there a property or another event which will give me what I'm after?
I recently had the same issue. I solved it with the following:
$('#existing').droppable({
drop: function(e, ui) {
// ui.draggable is the node that gets created in #existing
// ui.draggable[0].originDragger is the node that was
// dragged from #toolbox
}
}).sortable({
revert: true
});
I haven't tried either of these, but in theory, they seem like they would work. First, if you made the ul#existing also a droppable, you could do something on the drop event, such as get the info you need from that li, like it's text(), remove that object from the DOM and generate a new element.
Orrr, you could do something on the stop event of your draggable, like check whether the elements parents are now ul#existing. Hope this helps.
do not bind to sortreceive, instead bind to sortout like so
$("#sortable").bind('sortout', function(event, ui) {
console.log(ui.item);
});
OR
$("#sortable").sortable({ //during initialization
out:function(event, ui) {
console.log(ui.item);
}
});
in this case ui.item will be the element you are looking for
I am actually trying to make a .php page where I am going to have 3 draggable elements which have to be dragged to 3 droppable elements -each draggable to a droppable, and they are unique, so one each droppable will only accept a certain draggable.
The thing is that I need to control that all of the elements have been dragged to the right spot, in which case I should redirect the user for example to success.php, otherwise, if some of the elements were dragged to the wrong droppable, the user have to go to for example failure.php.
Is there anyway for example to save a certain value in a $_SESSION in PHP in order to know that all the draggables have been dropped in the right place?
This is the code for the drag&drop:
$(function() {
$("#draggableLeiden").draggable();
$("#draggableTheHague").draggable();
$("#draggableRotterdam").draggable();
$("#droppableLeiden").droppable({
accept: '.imgLeiden',
drop: function(event, ui)
{
$(this).addClass('ui-state-highlight');
}
});
$("#droppableTheHague").droppable({
accept: '.imgTheHague',
drop: function(event, ui)
{
$(this).addClass('ui-state-highlight');
}
});
$("#droppableRotterdam").droppable({
accept: '.imgRotterdam',
drop: function()
{
$(this).addClass('ui-state-highlight');
//var activeClass = $(this).droppable('option', 'activeClass','ui-state-highlight');
}
});
});
I am trying to do this for example getting the active class of the droppable elements to see if it matches 'ui-state-highlight', but actually, that tag is gonna be executed everytime the page reloads, so if I try to insert any code into the
drop: function()
it will always execute.
Thanks a lot in advance!
Use the revert option instead. When a draggable element is dropped on anything but the accepted droppable element then it will slide back to its original spot. Does this work for you?
Are you by chance looking for ui.draggable it holds the element that was dropped?
http://jqueryui.com/demos/droppable/
$('#target').droppable({
drop : function(event,ui){
if($(ui.draggable).attr('id') == "correcttarget")
{
window.location = "yay.php";
}
else
{
window.location = "awwww.php";
}
}
})
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