使用较新的JQuery 3.3 (使用JQuery UI触摸键)时，JQuery UI Draggable失败
使用较新的JQuery 3.3 (使用JQuery UI触摸键)时，JQuery UI Draggable失败
提问于 2019-06-09 08:14:24
我使用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
Stack Overflow用户
回答已采纳
发布于 2019-06-09 08:59:46
不知道确切的原因，但是使用JQuery 3.3和更高版本的JQuery UI 1.12.1似乎已经解决了这个问题！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56511046
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号