locked
Jquery draggable Containment doesn't work with css Position:absolute RRS feed

  • Question

  • User1196139514 posted

    Hello,

    I have a problem when using both containment: "#containerShip" and Css concurrently; for instance when I drag the panel, all the sudden the panel jumps to the top of the screen and just stays there even if I try to drag it back down. In order for the panel to work correctly when dragging to another area on the page, I have to disable the containment: "#containerShip" option below. And If I disable css then the panel will not stay in the correct previously positioned upon entry the web page. I also had tried and the panel would position itself at the right bottom of the page. I am terrible in Css so I don't know what the issue is. I spent the whole day trying to make both containment and position absolute to working but no luck. Any advice please. Tia.

    Below is my Mvc viewpage:

    <script>

            $("#myFav").draggable({

                drag: function () {

                    $(this).css("opacity", "0.5"); // Semi-transparent while being dragged

                },

                stop: function (event, ui) {

                    var position = $(this).position();

                    var xPos = position.left;

                    var yPos = position.top;

                    var disOrder = "";  // this is for sorting lists

                    saveCoords(xPos, yPos, ui.helper.attr('id'), disOrder);

                    $(this).css("opacity", "1.0"); // Revert to fully opaque when dragging stopped

                },

                containment: "#containerShip",    // this will not work if enabled

                cursor: "move"

            }).disableSelection().css("position", "absolute").css("width", "300px");

    </script

    <div class="container">

    <div class="row" style="color:black;" id="containerShip">

            <div class="col-md-4" id="myFav" style="top:@(yPosFa);left:@(xPosFa);">

                <div class="panel panel-primary">

                    <div class="panel-heading">Favorites</div>

                    <div class="panel-body">

                        <ul class="list-group">

                            <li class="list-group-item" id='item_1'>Item 1</li>

                            <li class="list-group-item" id='item_2'>Item 2</li>

                            <li class="list-group-item" id='item_3'>Item 3</li>

                            <li class="list-group-item" id='item_4'>Item 4</li>

                            <li class="list-group-item" id='item_5'>Item 5</li>

                        </ul>

                    </div>

                </div>

            </div>

                </div>

            </div>

    Saturday, November 25, 2017 3:23 AM

Answers

  • User-707554951 posted

    Hi monde,

    As far as I know, containment  property  Constrains dragging to within the bounds of the specified element or region.

    The specified element shouldn’t be the element that will be dragged.

    So, you should have something as below:

    <style>
        #truecontainer {
            background-color:  burlywood;
            width:300px;
            height:600px;
        }
    </style>
    
    <div id="truecontainer">
        <div class="container">
            <div class="row"  id="containerShip">
                <div class="col-md-4" id="myFav">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Favorites</div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item" id='item_1'>Item 1</li>
                                <li class="list-group-item" id='item_2'>Item 2</li>
                                <li class="list-group-item" id='item_3'>Item 3</li>
                                <li class="list-group-item" id='item_4'>Item 4</li>
                                <li class="list-group-item" id='item_5'>Item 5</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet">
    
    <script>
        $("#myFav").draggable({
    
            drag: function () {
                $(this).css("opacity", "0.5"); // Semi-transparent while being dragged
            },
            stop: function (event, ui) {
                var position = $(this).position();
                var xPos = position.left;
                var yPos = position.top;
                var disOrder = "";  // this is for sorting lists
               // saveCoords(xPos, yPos, ui.helper.attr('id'), disOrder);
                $(this).css("opacity", "1.0");  // Revert to fully opaque when dragging stopped
            },
            containment: "#truecontainer",    // this will not work if enabled
            cursor: "move"
        }).disableSelection().css("position", "absolute").css("width", "300px");
    </script>

    Output:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 27, 2017 8:05 AM

All replies

  • User-707554951 posted

    Hi monde,

    As far as I know, containment  property  Constrains dragging to within the bounds of the specified element or region.

    The specified element shouldn’t be the element that will be dragged.

    So, you should have something as below:

    <style>
        #truecontainer {
            background-color:  burlywood;
            width:300px;
            height:600px;
        }
    </style>
    
    <div id="truecontainer">
        <div class="container">
            <div class="row"  id="containerShip">
                <div class="col-md-4" id="myFav">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Favorites</div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item" id='item_1'>Item 1</li>
                                <li class="list-group-item" id='item_2'>Item 2</li>
                                <li class="list-group-item" id='item_3'>Item 3</li>
                                <li class="list-group-item" id='item_4'>Item 4</li>
                                <li class="list-group-item" id='item_5'>Item 5</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet">
    
    <script>
        $("#myFav").draggable({
    
            drag: function () {
                $(this).css("opacity", "0.5"); // Semi-transparent while being dragged
            },
            stop: function (event, ui) {
                var position = $(this).position();
                var xPos = position.left;
                var yPos = position.top;
                var disOrder = "";  // this is for sorting lists
               // saveCoords(xPos, yPos, ui.helper.attr('id'), disOrder);
                $(this).css("opacity", "1.0");  // Revert to fully opaque when dragging stopped
            },
            containment: "#truecontainer",    // this will not work if enabled
            cursor: "move"
        }).disableSelection().css("position", "absolute").css("width", "300px");
    </script>

    Output:

    Best regards

    Cathy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 27, 2017 8:05 AM
  • User1196139514 posted

    n/a

    Monday, November 27, 2017 8:24 PM
  • User1196139514 posted

    Cathy, 

    It works now after I changed the css in accordance with your suggestion: <div id="containerShip" style="width:100%; height:900px;"> The reason was that I didn't specify the width and the height of the containment div.

    Thanks much your advice.

    Monday, November 27, 2017 8:43 PM
  • User1196139514 posted

    Cathy,

    One last question please.

    As of now, everything works when I set a fixed height such as "height:700px"; however, I would like to set css "height:auto" so that I can drag the panel down further to the bottom. It doesn't work when I set height:auto; the panel would position itself at the top of the screen upon entry the webpage. Below is what I have as an example for your clarity:

    <div class="container"

       <div class="row>

            <div>Title of my page</div

       </div>

       <div id="containerShip" style="width: 100%;height:auto;">  // this is where containment start

            <div class="row">

                   <div>panel 1</div>

            </div

        </div> // containment ends here

    <div>

    Basically, my goal is how do I make the containment with height:auto and "Panel 1" will stay under "Title of my page"? My point is that I would like to have an expandable height containment instead of a fixed height containment. Again, if I set height = auto, "Panel 1" displays at the top of the screen and above "Title of my page". Hope I explained it well. Thank you.

    Best regards,

    Monde

    Tuesday, November 28, 2017 1:09 AM