CODEWITHSUNDEEP
jqueryjquery-ui-draggable
Yanick Rochon
Yanick Rochon

Reputation: 53616

jQuery draggable containment using array is not working as expected

I have this piece of HTML

<div id="workflowEditor" class="workflow-editor">

    <div class="node" class="ui-widget" style="top:20px; left:40px;">
        <div class="ui-widget ui-widget-header ui-state-default">Header test</div>
        <div class="ui-widget ui-widget-content">Test Content</div>
    </div>

</div>

With this CSS

.workflow-editor
{
    position: relative;
    overflow: auto;
}

.workflow-editor .node
{
    position: absolute;

    min-width: 64px;
    min-height: 64px;
}

Than calling

$(".node", "#workflowEditor").draggable({
    containment: [0, 0, 500, 500]
});

However, dragging this "node" will allow dragging into negative values; it seems that draggable is using the browser's viewport coordinate to limit the bounding box. Is there some way to tell that the coordinates are relative to the draggable's parent?

Note: the parent may change position over time.

** Edit **

the surface where the draggables are located is relative to some other content. Like the CSS specifies, I need it to be overflow:scroll;, so if the draggables are dragged outside, then the scrollbars will be displayed. The parent's size is fixed. The problem I'm having is that the draggables can be dragged to the left (or top) of the surface (thus I lose them). I'd like to have a similar behaviour as setting the containment to "parent", but allowing draggables to overflow unto the right/bottom sides of the parent.

Upvotes: 7

Views: 9308

Answers (2)

paulojreis
paulojreis

Reputation: 51

I've had a similar problem - I needed to position "boxes" inside a container, allowing them to overflow to the bottom or the right, but not to the left or top. I also had to support varying the container's position.

Unfortunately, I could not find an elegant solution. As you correctly note, setting the containment via a coordinates array will establish document-related metrics, so we have to work with the position of the container relative to the document.

My little hack was to use the "document" position of the container for the top and left limits (I used jQuery offset [1], and a big enough value for right and bottom. I used the dragstart event [2] to re-read and reset the viewport position of the container (which updated the containment box to the current coordinates of the container, via the options method [3]).

var $containerEl = $('#container'),
    $draggableEl = $('#my-draggable');

$draggableEl.on('dragstart', function (e) {
    $(e.target).draggable('option',
                          'containment',
                          [ $containerEl.offset().left, $containerEl.offset().top, 15000, 15000 ]);
});

$draggableEl.draggable({
    containment: [ $containerEl.offset().left, $containerEl.offset().top, 15000, 15000 ]
});

[1] http://api.jquery.com/offset/

[2] http://api.jqueryui.com/draggable/#event-start

[3] http://api.jqueryui.com/draggable/#method-option

Upvotes: 0

Rachit Doshi
Rachit Doshi

Reputation: 183

calculating the boundaries of the node and its parent, please check the jsFiddle Link as per the explanations at Jquery UI

var containmentX1 = $(".node").parent().offset().left;
var containmentY1 = $(".node").parent().offset().top;
var containmentX2 =  ($(".node").parent().outerWidth() +  $(".node").parent().offset().left - $('.node').outerWidth())
var containmentY2 = ($(".node").parent().outerHeight() +  $(".node").parent().offset().top - $('.node').outerHeight()) 

$(".node").draggable({
    containment:  [containmentX1, containmentY1, containmentX2, containmentY2]
});

Upvotes: 5

Related Questions