Вопрос по jquery, javascript – Jquery Fancybox перетаскиваемая проблема с полосами прокрутки

3

Я использую Fancybox с плагиномjquery.easydrag.js, Причина этого в том, чтобы иметь возможность таскать фантазийную коробку.

Кажется, что он работает нормально, но проблема возникает, когда в fancybox есть полосы прокрутки. То есть Например, при нажатии кнопки «Отправить» и отсутствии ввода каких-либо полей проверка на экране вызывает полосы прокрутки. Это нормально, но полосы прокрутки вызывают все виды проблем с перетаскиваемой функцией, поэтому, когда я пытаюсь щелкнуть полосу прокрутки вверх и вниз, она фактически перемещает все окна. Таким образом, кажется, что не понятно, какой контент можно перемещать и что делать с полосой прокрутки.

        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);

РЕДАКТИРОВАТЬ :

Мне удалось добавить что-то для ввода и 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

вы можете увидеть проблему с полосой прокрутки здесьjquery.diaz-cornen.com/fancybox/… по второй ссылке нажмите здесь, чтобы посмотреть фильм в перетаскиваемой фантазии - AJAX StevieB
Привет, Стив, было бы очень полезно, если бы ты также показал свой HTML, чтобы мы почувствовали, что ты делаешь со стороны контента. Спасибо. jmort253
О да, теперь я вижу. Первый был очень приятным и плавным. Второе ... не так уж много ... Вы пытались отредактировать CSS для контейнера fancybox и использовать переполнение: ни одного, чтобы убрать полосы прокрутки, при условии, что они вам не нужны? Я заменил переполнение авто на #fancy_ajax, и это, казалось, заставило его вести себя немного лучше. jmort253

Ваш Ответ

4   ответа
9

Я разместилпервый пример о том, как сделать fancybox перетаскиваемым еще в 2009 году для v1.2.1. Затем я опубликовал некоторые заметки, чтобы он работал с v1.3.1как видно здесь но когда был представлен fancybox v1.3.4,easyDrag Плагин работал не так гладко, как в предыдущих версиях, и начал вести себя глючно. У меня не было времени, чтобы найти обходной путь ... поэтому я просто бросил его.

Решение было простым, хотя:easyDrag Плагин позволяет установить & quot;handler& Quot;как объяснено здесь поэтому вместо того, чтобы держать и перетаскивать весь#fancybox-wrap Контейнер, который блокирует доступ к полосам прокрутки, если таковые имеются, вы просто перетащите лайтбокс из определенного определенного элемента. такиеhandler может быть добавлен к#fancybox-wrap селектор и установите его в плагине EasyDrag, используяonComplete опция обратного вызова API, как:

'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's 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.

Пожалуйста, не стесняйтесь анализировать код и настраивать его в соответствии со своими потребностями (и не забудьте предоставить мне награду;)

UPDATE: Обратите внимание, что поскольку мы добавляем обработчик к#fancybox-wrap контейнер каждый раз, когда мы запускаем fancybox, тогда нам нужно удалить его, как только мы закроем fancybox, используяonClosed обратный вызов, иначе мы продублируем обработчик, если снова откроем fancybox с неожиданными результатами:

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

Я обновилмоя ДЕМО тоже.

LAST NOTE: Это решение для fancyboxv1.3.4.

Я не проверял это сv2.x но я не понимаю, почему это не сработает. Просто убедитесь, что вы связываетеEasyDrag и добавить обработчик к.fancybox-wrap селектор вместо

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

Вы можете использоватьafterShow обратный вызов, чтобы добавить обработчик к нему иafterClose удалить это.

Error: User Rate Limit Exceeded StevieB
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded StevieB
2

Используя вышеупомянутое решение, чтобы добавить обработчик для селектора # 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>
0

Чтобы устранить проблему с полосой прокрутки, вызванную объединением Easydrag с Fancybox, вам необходимо устранить полосы прокрутки. По умолчанию таблица стилей Fancybox CSS применяет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>

Это исключит полосы прокрутки и позволит плагину easy drag работать плавно.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded StevieB
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
0

После тестирования этих решений я столкнулся с проблемой перетаскивания iframe. Чтобы решить, я переключился наjQuery 1.9.1 UI Плагин для перетаскивания и создания прозрачного изображения при перетаскивании. Удалите изображение после перетаскивания для доступа к содержимому. Прекрасно работает с fancybox iframe и позволяет быстро перетаскивать его через iframe. Смотрите пример кода ниже.

$("#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()} 
                  });  
                }
         });

Похожие вопросы