SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery ui droppable

    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




    Code JavaScript:
    $(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

  2. #2
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just the last thing
    fadeOut doesn't work
    and it should work imho

  3. #3
    SitePoint Guru whisher's Avatar
    Join Date
    May 2006
    Location
    Kakiland
    Posts
    732
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a little better
    Code JavaScript:
    $(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 ....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •