Сбой перетаскивания JQuery UI с более новым JQuery 3.3 (с использованием JQuery UI Touch Punch) - PullRequest
Новая
       40

Сбой перетаскивания JQuery UI с более новым JQuery 3.3 (с использованием JQuery UI Touch Punch)

0 голосов
/ 09 июня 2019

Я реализовал слайдер с разделенным экраном, используя Jquery UI и Touch Punch, перетаскивая значок - используя функцию «перетаскивания» в jQuery UI.он отлично работает на рабочем столе и на мобильном телефоне IOS.Я пошел вместе с jQuery 1.12.4., Основываясь на некотором коде, предоставленном автором / источником.

Однако, когда я использую более позднюю версию jQuery 3.3.1, перетаскивание завершается неудачно, и я получаю консольные ошибки.Я получаю следующие ошибки: 

jquery-ui.min.js:5 
Uncaught TypeError: e(...).find(...).andSelf is not a function
    at e.<computed>.<computed>._getHandle (jquery-ui.min.js:5)
    at e.<computed>.<computed>._getHandle (jquery-ui.min.js:5)
    at e.<computed>.<computed>._mouseCapture (jquery-ui.min.js:5)
    at e.<computed>.<computed>._mouseCapture (jquery-ui.min.js:5)
    at e.<computed>.<computed>._mouseDown (jquery-ui.min.js:5)
    at e.<computed>.<computed>._mouseDown (jquery-ui.min.js:5)
    at HTMLDivElement.<anonymous> (jquery-ui.min.js:5)
    at HTMLDivElement.dispatch (jquery-3.3.1.min.js:2)
    at HTMLDivElement.y.handle (jquery-3.3.1.min.js:2)

Не совсем понимаю сообщения об ошибках выше.Кто-нибудь может предоставить исправление, используя более поздние версии jQuery (который я использую для многих других частей сайта)?

Тестовый код, с которым я работал ниже.Вы можете вырезать / вставить в браузер, и вы увидите, что он работает должным образом - нажмите на стрелки влево / вправо, перетащите и разделенный экран переместится вместе с ним: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Draggable - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

    <style>
    #side {
      height: 100%;
      width: 200px;
      position: fixed;
      z-index: -1;
      top: 0px;
      left: 0px;
      background-color: #ffeecc;
    }
    #drag_line{
        width:100px;
        height:100vh;
        position:fixed;
        top: 0px;
        left: 150px;
        background:transparent;
        z-index: 0;
    }
    #drag_handle {
      position: relative;
      top: 40%;
      text-align:center;
      z-index: 1;
      color:#808080;
    }
    #main {
      height: 100vh;
      width: 100%;
      position: fixed;
      top: 0px;
      left: 0px;
      z-index: -1;
      margin-left: 200px;
      padding: 0px;
      background-color: #d9f2d9;
    }
    </style>

</head>
<body>
    <div id="side">SIDE</div>
    <div id="drag_line" style="cursor: pointer;">
        <div id="drag_handle">
            <p style="font-size: 200%;"><i class="fas fa-angle-double-left"></i><i class="fas fa-angle-double-right"></i></p>
            <!--<p id="drag_handle"><i class="fas fa-grip-lines-vertical"></i></p>(alternate image for drag handle symbol)-->
            <p id="xPos">X</p>
        </div>
    </div>
    <div id="main">MAIN</div>   

<script>
$('#drag_line').draggable(
    {axis: "x",//to enable horizontal movement only, not vertical
        drag: function(){            
            var offset = $(this).offset();
            var xPos = Math.round(offset.left);
            //var yPos = offset.top;//not used
            $('#xPos').text(xPos);
            $('#side').width(xPos+50);
            $("#main").css('margin-left',xPos+50);
        }
    });
 </script>
</body>
</html>

Более поздняя версия jQuery, перетаскиваемая, не работает(не двигается при нажатии / перетаскивании): 

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"" type="text/javascript" charset="utf-8"></script>

Заранее спасибо!

1 Ответ

0 голосов
/ 09 июня 2019

Не знаю точной причины, но использование JQuery 3.3 вместе с более поздней версией JQuery UI 1.12.1, похоже, решило проблему!

...