CODEWITHSUNDEEP
jqueryjquery-uidraggable
Demiro-FE-Architect
Demiro-FE-Architect

Reputation: 3740

jquery UI draggable: control (pause) dragging when some condition is met

when dragging an element I am doing some calculation and when a certain critaria is matched I'd like the dragging to pause.

I don't want trigging a mouseup event, just pause.

I have a perfect example set on this JS FIDDLE

Please see a container and a list of rectangles. What I would like to achieve is somewhat the opposite as containment...

If I would be to set the containment to be .draggable_wrapper, than my UL list would be constrained inside...I DON'T WANT THAT

What I'd like is that when I drag the list, if the list position is more than zero (>0) TO pause dragging to the right and allow dragging only to the left (so to the negative position)...

I don't want first LI's left border to ever get to the right of the container left border...

and in the other side the exact same thing.... when draggin to the left... I want to stop when the 8. li's right border crossing the container's right border (this happens in the example where position is < than -55px;

so to make it more readable

$(....).draggable({
....
drag: function(){
var p_left = $(this).position().left;

if(left > 0) stop_dragging_right, allow only left;
if(left < -55px) sto_dragging_left, allow_only_right;

});

How can I do that? similar is done when constraining

Upvotes: 2

Views: 3217

Answers (3)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262919

You can obtain the coordinates of your wrapper element with offset() and provide your own containment box by passing an array in the containment option:

var wrapperOffset = $(".draggable_wrapper").offset();
$('.draggable_wrapper ul').draggable({
    distance: 3,
    axis: "x",
    revert: false,
    scroll: false,
    containment: [
        wrapperOffset.left - 55,
        wrapperOffset.top,
        wrapperOffset.left,
        wrapperOffset.top
    ],
    drag: function(e) {
        $('#posx').val($(this).position().left);
    }
});

You will find an updated fiddle here.

Upvotes: 8

Milli
Milli

Reputation: 1361

One can restrict/constrain the movement of a draggable element, by defining the boundaries of the draggable area. Have look at the jquery UI example here

Is it possible for you to have a outer parent/containment to restrict the drag ? You can do something like below ..

$( "#draggable5" ).draggable({ containment: "parent" });

Where this parent is extended on both sides, meeting your calculation constraints ..

Hope this helps ..

Upvotes: 0

sdespont
sdespont

Reputation: 14025

You could overwrite the position of the element being dragged and apply the same position if your condition is false.

This fiddle is an example of the position overriding : http://jsfiddle.net/QvRjL/74/

This fiddle is an example of how you could do to check if the dragged element is near a border of your container : http://jsfiddle.net/pPn3v/22/

$(document).mousemove(function(e){
   window.mouseXPos = e.pageX;
   window.mouseYPos = e.pageY;
}); 

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },        
        scroll: true,
        stop: function(){},  
        drag : function(e,ui){            
            //Force the helper position

            if(myCondition)
            {
                //The draggable element can be moved
                ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
                ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
            }
            else
                return false; //No move allowed
        });
});

Upvotes: 1

Related Questions