locked
How to find Postion for a div while dragging and dropping and scroll bar is enabled ? RRS feed

  • Question

  • User-147238865 posted

    hii all;

    I have one parent div and i have one child div; then what i am doing is that i am dragging an element to a Parent Div and that parent div currently showing scroll bar  so at that time when i am dropping the content to parent div i am calculating actual position where the user dropped (i.e how much from top and how much form left) then creating dynamic div inside parent div and setting left and top to that div.

    But i am not getting actual position when scroll bar enabled (scroll bar enable means the height of parent div increased from max-height) in parent div but when scroll is not their then i am able to set the actual position by using "Offset.top" and "Offset.Left".

    Note:- Using Jquery Drag and Dop

    So how to do this please help me.

    Thanks;

    Regards;

    SK.

    Thursday, September 22, 2016 1:17 PM

Answers

  • User-147238865 posted

    Solved Issue by using following code :-

     var $newPosX = ui.offset.left - $(this).offset().left;
                    var $newPosY=ui.offset.top-$(this).offset().left;
                    var leftdiv = document.getElementById("LeftSideDiv");
                    var hasVerticalScrollbar = leftdiv.scrollHeight > leftdiv.clientHeight;
                    var hasHorizontalScrollbar = leftdiv.scrollWidth > leftdiv.clientWidth;
                    if (hasVerticalScrollbar) {
                        $newPosY=   (ui.offset.top - $(this).offset().left)+this.scrollTop;
                    }

    Only this line "$newPosY= (ui.offset.top - $(this).offset().left)+this.scrollTop" code solved the problem.

    Thanks;

    Regards

    Sk.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 26, 2016 6:40 AM

All replies

  • User283571144 posted

    Hi SURYA_TECH,

    I have one parent div and i have one child div; then what i am doing is that i am dragging an element to a Parent Div and that parent div currently showing scroll bar  so at that time when i am dropping the content to parent div i am calculating actual position where the user dropped (i.e how much from top and how much form left) then creating dynamic div inside parent div and setting left and top to that div.

    According to your description, I couldn't understand your requirement clearly.

    Do you mean you need to know the child div's position according to parent div?

    If this is your requirement, I suggest you could refer to follow codes:

    Scirpt:

        <script type="text/javascript">
            $(function () {
                $("#draggable").draggable({
                    stop: function (event, ui) {
                        var left = $("#draggable").offset().left-$("#Box").offset().top;
                        var top = $("#draggable").offset().top-$("#Box").offset().left;
                         $("#Show").text("Left:" + left + "Top:" + top);
                    }
                });
            });
        </script>

    Html:

        <div id="Box" style="width:500px;height:500px;overflow:Scroll;border:1px solid red;">
            <div id="draggable" class="ui-widget-content">
                <p>Drag me around</p>
                <span id="Show"></span>
            </div>
        </div>

    Result:

    If I misunderstand your requirement, please post more relevant codes and explain more about your requirement.

    Best Regards,

    Brando

    Friday, September 23, 2016 9:16 AM
  • User-147238865 posted

    Thanks for quick reply;

    What you did is; Inside Main div(id=Box) you have child div(id=draggable) and you finding top and left while dragging inside parent div; but what my requirement is i don't have any child div inside Parent div [suppose for same Parent id=box]; but i have child div inside another div called as Box1.

    Box and Box1 two div are side by side and from Box1 i am dragging an element and dropping inside Box so at that moment while dropping i need the top and left position for dropped div.

    I am doing like this way but not getting :-

    Note:- Bellow code working fine when i don't have any scroll-bar in side Box div,problem start when scroll bar comes.

    $("#Box").droppable({
    scroll:true,
       drop: function (event, ui) {
                    debugger;
                    var $newPosX = ui.offset.left - $(this).offset().left;
                    var $newPosY=ui.offset.top   //-$(this).offset().left;
     if (hasVerticalScrollbar) { //It is using for checking when scroll bar active for div
                        $newPosY=   $(this).offset().top;
                    }
                    else
                    {
                        $newPosY= ui.offset.top - $(this).offset().top;
                    }

    $("#Box").append("<div class='colm-lg-3 ui-widget-content' style=';top:"+$newPosX+"px;left:"+$newPosY+"px' id='dashlate" + count + "' data-value='" + ui.draggable.find('a').
    attr('data-value') + "'></div>");
    });
    Friday, September 23, 2016 2:42 PM
  • User-147238865 posted

    Solved Issue by using following code :-

     var $newPosX = ui.offset.left - $(this).offset().left;
                    var $newPosY=ui.offset.top-$(this).offset().left;
                    var leftdiv = document.getElementById("LeftSideDiv");
                    var hasVerticalScrollbar = leftdiv.scrollHeight > leftdiv.clientHeight;
                    var hasHorizontalScrollbar = leftdiv.scrollWidth > leftdiv.clientWidth;
                    if (hasVerticalScrollbar) {
                        $newPosY=   (ui.offset.top - $(this).offset().left)+this.scrollTop;
                    }

    Only this line "$newPosY= (ui.offset.top - $(this).offset().left)+this.scrollTop" code solved the problem.

    Thanks;

    Regards

    Sk.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 26, 2016 6:40 AM