Jquery ui droppable

JavaScript
1

Hi,
I’d like that:
the draggable come back if invalid (it works)
clone the draggable at the end of draggable event
(now it works only with a invalid drag )
center the mouse at the center image


$(function() {
                $( ".dragme" ).draggable({
                    zIndex: 1,
                    cursor:'crosshair',
                    revert: "invalid",
                    cursorAt:{left:0},
                    opacity: 0.8,
                    start:function(event,ui){
                      
                       
                    },
                    drag: function(event, ui) {

                    },
                    stop: function(event, ui) {
                       var parent = $(this).parent();
                       alert(parent[0].className);
                       $(this).clone().prependTo(parent[0]);
                    }
                });

                $( "#droppable" ).droppable({
                    drop: function( event, ui ) {
                        var parent = $(ui.draggable).parent();
                        alert(parent.get(0).tagName);
                        $(ui.draggable).fadeOut('slow', function() {

                        });
                    }
                });
            });

click for an on line example
mouse down on the thumb drag in the green box
http://mytube.blogial.net/

bye.

Ps
Sorry for the mark up just starting with html5 :slight_smile:

2

Just the last thing :slight_smile:
fadeOut doesn’t work
and it should work imho :frowning:

3

Just a little better


$(function() {
                $( ".dragme" ).draggable({
                    zIndex: 1,
                    cursor:'crosshair',
                    revert: "invalid",
                    helper: 'clone',
                    cursorAt:{left:60,top:45},
                    opacity: 0.8,
                    start:function(event,ui){
                      
                       
                    },
                    drag: function(event, ui) {

                    },
                    stop: function(event, ui) {
                       var parent = $(this).parent();
                       var $clone = $(this).clone();
                       $clone.prependTo(parent[0]);
                       $(this).remove();
                    }
                });

                $( "#droppable" ).droppable({
                    drop: function( event, ui ) {
                        var parent = $(ui.draggable).parent();
                        alert(parent.get(0).tagName);
                        $(ui.draggable).fadeOut('slow', function() {
                            alert($(ui.draggable).data("videoid"))
                        });
                    }
                });
          });

but it’s not very clear the use of helper if someone could enlighten me … :slight_smile: