How to make Fancybox version 2 draggable

Question

I currently have popups on a site I'm developing through version 2 of fancybox. I'm using fancybox because I need to be able to submit forms through said popups.

Now, I've actually found another thread that got fancybox version 1 to work with a jquery plugin called easydrag but the problem is that in that version, although the popup was draggable, you couldn't interact with the form, which is obviously a major problem. Knowing that someone got fancybox version 1 to be draggable makes me think it must be possible with version 2 as well, and ideally with the jqueryui function draggable().

Now with the version 1 solution, the developer simply assigned the draggable property to the ".fancybox-outer" class and it worked, because fancbox outer was the parent div. In version 2, however, that is not the case, as fancybox outer is buried under ".fancybox-wrap" and ".fancybox-skin" neither of which work in place of ".fancybox-outer". I even went into the fancbox jquery and added my own id to ".fancybox-wrap" called "#fancybox321" - still no good.

If anyone has any ideas, I'd love some help. Source code of a test page I made is below. You can see it in action on my website at http://lennoxwebdesign.com/test-draggable.php - obviously make sure your browser allows popups.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test-draggable</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script type="text/javascript" src="jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {

        $('.fancybox').fancybox();

    });


</script>

<script>
  $(function() {
    $( "#fancybox321" ).draggable();
  });
</script>

</head>

<body>



<a class="fancybox fancybox.iframe" href="test-popup-form.php">popup</a>

</body>

you most likely need this http://stackoverflow.com/a/10781937/1055987 (includes demo with form). Make sure you check the last note for v2.x — JFK, Oct 31 '13 at 16:55
possible duplicate of [Jquery Fancybox draggable issue with Scrollbars](http://stackoverflow.com/questions/10725866/jquery-fancybox-draggable-issue-with-scrollbars) — JFK, Oct 31 '13 at 16:55
@JFK Thank you - your final suggestion in that thread is what did it for me. I need to use the AfterShow callback. The correct (i.e. tested and working) code is: **$('.fancybox').fancybox({ afterShow: function() { $( ".fancybox-wrap" ).draggable();} });** you can see the working test page at [link](http://lennoxwebdesign.com/test-draggable2.php). Thanks Again! — Firebrat, Nov 02 '13 at 09:02

score 5 · Answer 1 · answered Apr 04 '14 at 13:26

5

If you are using jQuery-UI you can do following:

jQuery("#fancybox321").fancybox({
    beforeShow: function() {
        this.wrap.draggable();
    }
});

answered Apr 04 '14 at 13:26

algorhythm

8,530
3
35
47

score -3 · Answer 2 · answered Nov 16 '15 at 07:34

Have you tried this??

<script src="jquery.easydrag.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    // add drag and drop functionality to fancybox
    $("#fancy_outer").easydrag();
});
</script>

It works for me.

How to make Fancybox version 2 draggable

2 Answers2