Geek asks and answers

JQuery Fancybox drags problem by scrolling

I am using fancybox with a plugin jquery.easydrag.js. The reason for this is the ability to drag fancybox.

It seems to be working fine, but the problem occurs when the fancybox has scrollbars. That is, for example, when you click on submit and do not enter any fields, the validation on the screen causes scroll bars. Which is fine, but the scroll bars cause all kinds of problems with the drag and drop function, so when I try to click the scroll bar up and down, it actually moves all the windows. Therefore, it seems to be confused as to what content can be moved and what to do with the scroll bar.

        claimLink.fancybox({
        'width': 500,
        'height': 590,
        'autoDimensions': false,
        'onCleanup': function (e) {

            var modelClaimFormId = $j(e).attr("href").replace("body", "");
            var modalClaimForm = $j(modelClaimFormId);

            if (!($j(modalClaimForm).valid())) {
                $j(claimForm).remove();
                $j(e).parents("tr").remove();
            }

        }
    });

    $j("#fancybox-wrap").easydrag(true);

EDIT:

- textareas, , . ... , .

                $j("#fancybox-wrap").easydrag(true);

            $j("#fancybox-wrap input,textarea").click(function(){
                $j("#fancybox-wrap").dragOff();
            });
            $j("#fancybox-wrap input,textarea").mouseover(function () {
                $j("#fancybox-wrap").dragOff();
            });
            $j("#fancybox-wrap input,textarea").blur(function () {
                $j("#fancybox-wrap").dragOn();
            });
            $j("#fancybox-wrap input,textarea").mouseout(function () {
                $j("#fancybox-wrap").dragOn();
            });

JS easydrag

+3
4

, fancybox 2009 v1.2.1. , v1.3.1 , fancybox v1.3.4, easyDrag , , . ... .

: easyDrag " " , #fancybox-wrap, , , . #fancybox-wrap EasyDrag API- onComplete, :

'onComplete': function(){
  // append the handler on the top-left corner of fancybox
   $("#fancybox-wrap").append("<button id='handler'>Drag me</button>");
  // set the handler using the handler element ID
   $("#fancybox-wrap").setHandler('handler');
}

, , html, , . css , #fancybox-wrap , :

width: 80px; /* or whatever needed */
height: 24px;
position: absolute; /* important to position the handler into the fancybox wrap */
top: 0; /* top-left corner of the box but can be anywhere */
left: 0;
display: block;
z-index: 1120; /* important to be over the box */

.

!!!

, , fancybox , easyDrag.

, ( ;)

. : #fancybox-wrap , fancybox, , fancybox onClosed, , fancybox :

'onClosed' : function() {
  $("#fancybox-wrap #handler").remove();
}

DEMO.

. fancybox v1.3.4.

v2.x, , . , easyDrag .fancybox-wrap

$(".fancybox-wrap").easydrag();

afterShow, afterClose, .

+9

# fancybox-wrap EasyDrag API onComplete, , fancybox 1.3.4 fancybox , , .

 <script type="text/javascript" src="@Url.Content("~/fancybox/jquery.mousewheel-3.0.4.pack.js")"></script>
 <script type="text/javascript" src="@Url.Content("~/fancybox/jquery.fancybox-1.3.4.pack.js")"></script> 
 <script src="@Url.Content("~/Scripts/jquery.easydrag.handler.beta2.js")" type="text/javascript"></script> 
 <script>    
     //Fancybox
     $(document).ready(function () {            
         $("#iframeVideoPop").fancybox({
             'width': 890,
             'height': 595,
             'type': 'iframe',
             'autoScale': 'false',
             'hideOnContentClick': false,
             'onComplete': function() {
                  //Style the title where and how you want it
                  $("#fancybox-title").css({'top':'-20px', 'bottom':'auto'});
                  //Set the fancybox-title as the handler
                  $("#fancybox-wrap").setHandler('fancybox-title');
               }
         });

        $("#fancybox-wrap").easydrag();

     }); //ready
 <script>
+2

, Easydrag Fancybox, . CSS Fancybox overflow:auto , Fancybox, , Fancybox.

, CSS, , Fancybox . <head> -:

<style>

    /* id of the element generated and used by Fancybox as a wrapper around
       the generated content. */
    #fancy_ajax {
        /* Use the important identifier to ensure the overflow:auto is suppressed */
        overflow:none !important;

    }
</style>

.

0
source

After testing these solutions, I ran into an iframe drag and drop problem. To solve the problem, I switched to the jQuery 1.9.1 UI plugin for dragging and creating a transparent image when dragging. Delete the image after dragging and dropping to access the content. Works great with fancybox iframe and allows you to quickly drag and drop iframes. See the sample code below.

$("#iframePop").fancybox({
             'width': 890,
             'height': 430,
             'type': 'iframe',
             'autoScale': 'false',
             'hideOnContentClick': false,
             'onComplete': function() {
                  $("#fancybox-title").css({'top':'-2px', 'left':'15px', 'bottom':'auto', 'cursor':'move'});                       
                  $("#fancybox-wrap" ).draggable({ handle: "fancybox-title", iframeFix: true, 
                        start: function(ev,ui){$("#fancybox-wrap").append("<img src='@Url.Content("~/Content/Images/transparent.png")' id='hidenImg' style='border: 1px solid black; width: 640px; height: 400px; top: 20px; position: absolute; z-index: 10000;' />")}, 
                        drag: function(ev,ui){}, 
                        stop: function(ev, ui){$("#fancybox-wrap #hidenDiv").remove()} 
                  });  
                }
         });
0
source

More articles:


All Articles