Jquery UI 1.10.x Dialog drag issue on large body height

StackOverflow https://stackoverflow.com/questions/17044770

문제

In short: When You have document height > window height, scroll down and open dialog - You can not drag it in Firefox. Bug occured only in jQuery UI 1.10.x

How to reproduce:

jsfiddle:

http://jsfiddle.net/mefa/zrNNZ/15/

<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>Jquery UI FF dialog bug - jsFiddle demo by mefa</title>
    <script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
    <link href="/css/result-light.css" type="text/css" rel="stylesheet">
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet">
    <style type="text/css">
    html {
        font-size:12px;
    }
    body {
        height: 2000px;
    }
    </style>
    <script type="text/javascript">
    $(window).load(function(){
     $(function() {
        $( "#dialog-modal" ).dialog({
          height: 150,
          modal: true
        });
      });
    });
    </script>
</head>
<body>
<div title="Basic modal dialog" id="dialog-modal">
    <p>Drag this dialog to bottom of document in Firefox</p>
    <p>Bug only in jquery ui 1.10.x</p>
</div>
<p>Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body>
</html>

Video: http://www.youtube.com/watch?v=_J8aepYHg4U

So, assume U have a Jquery UI Dialog, and tag <body> has vertical scroll (for example You have much content, big table for example). Assume Your window height is 800 px and document height is 2000 px; So U need to scroll down, to get all contents.

Then You scroll down, over the window height, for example to 1000px, open dialog. After that You can't correctly drag it into any other position, because it's jumps like a mad.

Ive recorded a demonstration, based on the original jquery ui examples, so no one can say I missed or corrupted something. Only one thing Ive changed is body css attr "height", and set it to 2000px to simulate large document.

I appreciate any advice/fix.

도움이 되었습니까?

해결책

this is a bug in jquery-ui version 1.10.3
You can fix this by including previous version : 

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>

다른 팁

Suddenly, Ive found a solution.

To fix this bug, You need only to add following CSS rule

.ui-dialog {
    position: fixed;
}

But this also has side effects. If part of dialog is out of window scope, then no vertical/horizontal scrollbars appeared, and You can't reach hidden part of dialog in any way. Need to wait properly fix from Jquery UI team.

The real fix is to replace _convertPositionTo() and _generatePosition() in jquery.ui.draggable.js from those in the latest master (1.10.3 is official current release, so the fix should come out in 1.11) for those who run into it now and can't use those css hacks.

i have tried some thing for you

it is not the best but you can try it.. i hope

re place your code as 

 $(function() {
   $( "#dialog-modal" ).dialog({
     height: 150,
     modal: true,
     dragStop: function( event, ui ) {           
       $( "#dialog-modal" ).dialog({ position: 'center',draggable: true });
    }

  });
});

when you up the mouse click it will stick to center of your screen... as example i have keep it at center but you can keep it any where... just go through documentation.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top