drop a draggable using jquery

Question

Is there any way of dropping a draggable into the droppable by hardcoding and not by actually going into the browser and doing drag-drop??

Thanks in advance.:D

Answer 1

I think you mean to position a dragged option programmatically. If that is the case then look in the official jquary draggable documentation: http://docs.jquery.com/UI/API/1.8/Draggable

It seems the short answer is: To manipulate the position of a draggable during drag, you can either use a wrapper as the draggable helper and position the wrapped element with absolute positioning, or you can correct internal values like so:

$(this).data('draggable').offset.click.top -= x

Answer 2

I don't know if I have understood very clearly, in any case I think it is curious perspective,if you mean to animate and do the same things if we have dragged a layer into a droppable layer.

I suppose you could do it like this:

http://www.jsfiddle.net/dactivo/QLTUS/

You use animate() to move the layer to the droppable, and then in the complete function, you imitate what normally happens in a dropping action, that is to say change the class, and there you can include whatever.

I mean it is not important the drop event, but what you execute in the drop event, that can be included in your complete event of the animation. I have encapsulated this in a function called layerDrop().

$(function() { $( "#draggable" ).draggable();
$( "#droppable" ).droppable({ drop: function( event, ui ) { layerDrop(); } });

 $("#btnMove").click(function()
                     {

                            $("#draggable").animate({"left": $( "#droppable" ).offset().left ,"top": $( "#droppable" ).offset().top},
             {
duration: 1000,     specialEasing: {    width: 'linear' },
              complete:function()
               {

                    $("#message").html("Completed!");   
                 layerDrop();

                        //whatever
                }
            }
                                );
                     });

 function layerDrop(){
    $( "#droppable")
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "Dropped!" );   
 }

});