JQuery UI 较新的 JQuery 3.3 可拖动失败（使用 JQuery UI Touch Punch）

Question

我通过拖动图标使用 Jquery UI 和 Touch Punch 实现了分屏滑块 - 使用 jQuery UI "draggable" 功能。它在桌面和移动设备上运行良好 IOS phone。基于 author/source.

提供的一些代码，我选择了 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（我在网站的许多其他部分使用它）提供修复吗？

我在下面使用的测试代码。您可以 cut/paste 进入浏览器，应该会发现它按预期工作 - 单击 left/right 箭头，拖动，分屏随之移动：

<!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>

draggable失败（不移动click/drag）的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>

提前致谢！

Answer 1

不知道确切原因，但是使用 JQuery 3.3 和更高版本的 JQuery UI 1.12.1 似乎解决了问题！

JQuery UI 较新的 JQuery 3.3 可拖动失败（使用 JQuery UI Touch Punch）

JQuery UI Draggable Fails with newer JQuery 3.3 (using JQuery UI Touch Punch)

jquery

jquery-ui

draggable

jquery-ui-draggable

jquery-ui-touch-punch