Search code examples
jqueryjquery-uidraggableresizablecontainment

div Draggable et Rezible : doesn't work with containment


I want a resizable and draggable div on a bigger div that is contained in a little div (to have a scroll Bar) like this:

<div id="hgcScroll"  style="width:600px;overflow:auto">
    <div id="hgcRegle" style="width:800px">
    </div>
    <div id="hgcDeplacable">
    </div>
</div>

Then in my jQuery I have this:

$("#hgcDeplacable").resizable();
$("#hgcDeplacable").draggable();

$("#hgcDeplacable").draggable({ 
    containment: "#hgcScroll",
    axis: "x",
    grid: [5, 0]

}).resizable({
    containment: "#hgcScroll",
    handles: 'e, w',
    grid: nbrPxDeplac
});

But containment of the resizable makes all the application crash, and if I erase the condition containment my handles work just for "e" but not for "w".

What am I doing wrong?


Solution

  • Finally I have removed the two first line and i have separate the two methodes like this :

    $("#hgcDeplacable").resizable({
    handles: 'e, w',
    grid: 5});
    $("#hgcDeplacable").draggable({ 
    containment: "#hgcScroll",
    axis: "x",
    grid: [5, 0]
    });
    

    And it's work. If you have any questions, ask to me.