SAPUI5和JQuery可拖动-拒绝混合
[英]SAPUI5 and JQuery draggable - refuse to mix
问题描述
I am trying to use SapUI5 and JQuery $("#draggable").draggable(); 
我正在尝试使用SapUI5和JQuery $("#draggable").draggable(); function to drag some div around my html page. 函数在我的html页面周围拖动一些div。
problem is - they interfere with each other - SAPUI5 library also have a varibale named draggable (I want to use JQuery draggable() function ). 问题是-它们彼此干扰-SAPUI5库也有一个名为draggable的变量（我想使用JQuery draggable（） 函数 ）。
as a result I get Uncaught TypeError: $(...).draggable is not a function(…) 结果我得到了Uncaught TypeError: $(...).draggable is not a function(…)
how to solve it? 怎么解决呢？ my code is below.. It simulates the problem. 我的代码如下。它模拟了问题。 notice that once I remove the script tag of SAPUI5 it is working fine and I can drag the div.. 请注意，一旦删除SAPUI5的脚本标签，它就可以正常工作，并且可以拖动div。
Thanks in advance! 提前致谢！
<!doctype html> <html lang="en"> <head> <title>jQuery UI Draggable - Default functionality</title> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; border:1px; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js' data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m,sap.ui.ux3" data-sap-ui-theme="sap_bluecrystal" > </script> <script> $(function() { $("#draggable").draggable(); } ); </script> </head> <body> <div id="draggable"> <p>Drag me around</p> </div> </body> </html>
2 个解决方案
解决方案1
4 已采纳 2016-11-17 18:41:34
You should move the Jquery scripts at the bottom 您应该将Jquery脚本移到底部
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Draggable - Default functionality</title>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px; }
</style>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/1.38.10/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.m,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal"
>
</script>
<script>
$(function() {
$("#draggable").draggable();
} );
</script>
</head>
<body>
<div id="draggable">
<p>Drag me around</p>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
</html>
解决方案2
2 2016-11-17 18:47:41
Other option is to import the thirdparty libraries. 另一种选择是导入第三方库。
<script>
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
$(function() {
$("#draggable").draggable();
} );
</script>
You could wrap those calls in a function to make it less ugly =) 您可以将这些调用包装在一个函数中，以使其不那么难看=）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.