Sortables bug when inside scrolling positioned elements #1113

Closed
Adidi opened this Issue Mar 26, 2012 · 0 comments

Projects

None yet

1 participant

@Adidi
Adidi commented Mar 26, 2012

If the sortables are inside element with some position (fixed,absolute,relative) and the positioned container have scroll (overflow: scroll)
then the clone element if you start dragging when in the middle of the scroll - starts a few pixels up - it does not calculate the scroll top position of the element container - if you remove the position style all is working
full example:
http://jsfiddle.net/hHxUw/
full code:

<!DOCTYPE html>
<html>
<head>
    <title>Mootools testing</title>
    <meta charset="utf-8">      
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="mootools-core-1.4.5-full-nocompat.js" ></script>
    <script type="text/javascript" src="mootools-more-1.4.0.1.js" ></script>

    <style type="text/css">

        #container{
            width:200px;
            height: 300px;
            overflow-y:scroll;
            overflow-x:hidden;
             margin:0px auto;
             position:relative;
        }
        #list1{
            width:200px;
        }

        #list1 div{
            background-color:red;
            border:1px solid black;
            height:30px;
            cursor:move;   
        } 

        #list2{
            width:200px;
        }

        #list2 div{
            background-color:green;
            border:1px solid black;
            height:30px;   
            cursor:move;
        } 
    </style>    
</head>
<body>

  <div id="container">  
    <div id="list1" class="srt">
        <div>1-11111</div>
        <div>1-22222</div>
        <div>1-33333</div>
        <div>1-44444</div>
        <div>1-55555</div>
        <div>1-66666</div>
    </div>

    <div id="list2" class="srt">
        <div>2-11111</div>
        <div>2-22222</div>
        <div>2-33333</div>
        <div>2-44444</div>
        <div>2-55555</div>
        <div>2-66666</div>
    </div>
  </div>

<script type="text/javascript">

    window.addEvent('domready',function(){
        var srt = new Sortables('.srt',{ 
            constrain: false,
            revert: true,
            clone: true,    
            opacity: 0.2,
            onStart: function(element,clone){

            }.bind(this),
            dragOptions: {

            }
           });
    });

</script>
</body>
</html>
@SergioCrisostomo SergioCrisostomo added a commit to SergioCrisostomo/mootools-more that referenced this issue Apr 25, 2014
@SergioCrisostomo SergioCrisostomo fixes #1113 and fixes #1191
Added a new function to calculate better the position to work as
expected in cases where container has scroll, and position is fixed,
relative or absolute

http://jsfiddle.net/Hsf6W/
43794ea
@SergioCrisostomo SergioCrisostomo added a commit that closed this issue May 1, 2014
@SergioCrisostomo SergioCrisostomo fixes #1113 and fixes #1191
Added a new function to calculate better the position to work as
expected in cases where container has scroll, and position is fixed,
relative or absolute

http://jsfiddle.net/Hsf6W/
46a8131
@SergioCrisostomo SergioCrisostomo added a commit that referenced this issue May 1, 2014
@SergioCrisostomo SergioCrisostomo Fix Sortables with positioned offsetParent
When the sortables offsetParent has `position = fixed`, by dragging a
sortable, the cloned element being dragged has the wrong position if
the window or offsetParent  is scrolled.

This PR adjusts that by using window and offsetParent scroll to adjust the position value.
Added also a new function to calculate better the position to work as
expected in cases where container has scroll, and position is fixed,
relative or absolute

The buggy behaviour can be seen in this jsFiddle: http://jsfiddle.net/B5yn5/

Fiddle example with the correction: http://jsfiddle.net/Hsf6W/1/

( closes #1243 | fixes #1242 | fixes #1113 | fixes #1191 )
66a68b1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment