CODEWITHSUNDEEP
javascriptjqueryjquery-uidraggable
FuriousD
FuriousD

Reputation: 854

JQuery Draggable helper not contained

I am using the below code to init draggable, using a helper to create an easing effect. The use of the helper, however, breaks the containment and allows the draggable elements to leave their container. How might I constrain the helper to the container?

Some more info: The elements are contained within the left and top borders, just not the right and bottom borders.

JSFiddle: http://jsfiddle.net/qmkVR/12/

        $( ".drag" ).draggable( {
            containment: con_outer,
            scroll: false,
            helper: function(){
                return $('<div></div>').css('opacity',0);
            },
            drag: function(event, ui){
                $(this).stop().animate({
                    top: ui.helper.position().top,
                    left: ui.helper.position().left
                },200,'easeOutCirc');
            },
            start: function() {
                //Make the dragged item the top-most
                zindex ++;
                $(this).css("z-index",zindex);
            }
        }).each(function(index, value) {
            var $this = $(this);
            $this.click(function() {
                //Click only registers if the object isn't being as dragged
                if($this.is(".ui-draggable-dragging")) {
                    return;
                }
                clickPhoto(index);
            });
        });

Upvotes: 0

Views: 555

Answers (1)

Spencer May
Spencer May

Reputation: 4525

Define the helper as the <div class="drag"></div> by using the below code.

helper: function(){
            return $('<div class="drag"></div>').css('opacity',0);
    },

JS Fiddle

http://jsfiddle.net/qmkVR/13/

Upvotes: 1

Related Questions