CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Sean Law
Sean Law

Reputation: 45

Dropping a draggable in a droppable at the drop position

I have been trying to clone and drop a draggable at the position in a droppable at the coordinates where the drop happens. I have found examples online that deal with appending draggables to droppables, but they all seem to move the draggable to a specific part of the droppable on the initial drop.

Here is an example that does just that: - http://jsfiddle.net/scaillerie/njYqA/

//JavaScript from the jsfiddle
jQuery(function() {
jQuery(".component").draggable({
    //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
    helper: function() {
        return jQuery(this).clone().appendTo('body').css({
            'zIndex': 5
        });
    },
    cursor: 'move',
    containment: "document"
});

jQuery('.ui-layout-center').droppable({
    activeClass: 'ui-state-hover',
    accept: '.component',
    drop: function(event, ui) {
        if (!ui.draggable.hasClass("dropped"))
            jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
        }
    });
});

Is there anyway I can make the draggable stay at the coordinates where the drop occured?

Upvotes: 2

Views: 2226

Answers (3)

Alvin Magalona
Alvin Magalona

Reputation: 771

Edited you code and used appendTo() and set the offset 

jQuery(function() {
    jQuery(".component").draggable({
        //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
        helper: function() {
            return jQuery(this).clone().appendTo('body').css({
                'zIndex': 5
            });
        },
        cursor: 'move',
        containment: "document"
    });

    jQuery('.ui-layout-center').droppable({
        activeClass: 'ui-state-hover',
        accept: '.component',
        drop: function(event, ui) {
            var _this = jQuery(this);
            if (!ui.draggable.hasClass("dropped")) {
                var cloned = jQuery(ui.draggable).clone().addClass("dropped").draggable();
                jQuery(cloned).appendTo(this).offset({
                    top : ui.offset.top,
                    left: ui.offset.left
                });
            }  
        }
    });
});

Upvotes: 1

Manjar
Manjar

Reputation: 3268

you must define the coordinates in the cloned element on the drop:

drop: function(event, ui) { if (!ui.draggable.hasClass("dropped"))

        var clone=jQuery(ui.draggable).clone().addClass("dropped").draggable();
        clone.css('left',ui.position.left);    
        clone.css('top',ui.position.top);

        jQuery(this).append(clone);
    }
});

and also set the position absolute by css on the cloned components

.ui-layout-center .component {
   position:absolute !important;   
}

Here is working: http://jsfiddle.net/o2epq7p2/

Upvotes: 1

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10153

ui in the drop handler contains the dragged element's position absolute to the page. You need to transform those values to a position relative to the drop target and absolute position the cloned element inside the drop target using these values.

    drop: function(e, ui) {
        if (!ui.draggable.hasClass("dropped")) {
            var parentOffset = jQuery('.ui-layout-center').offset();
            var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable();
            dropped.css('left', (ui.position.left  - parentOffset.left) +'px');
            dropped.css('top', (ui.position.top - parentOffset.top) +'px');

            jQuery(this).append(dropped);
        }
    }

http://jsfiddle.net/3Lnqocf3/

Upvotes: 0

Related Questions