Question

我正在尝试使用SapUI5和JQuery $("#draggable").draggable();函数在我的html页面上拖动一些div。

问题是 - 它们相互干扰 - SAPUI5库也有一个名为draggable的变量（我想使用JQuery draggable（）函数）。

因此我得到Uncaught TypeError: $(...).draggable is not a function(…)

如何解决？我的代码在下面..它模拟了问题。请注意，一旦我删除SAPUI5的脚本标记，它工作正常，我可以拖动div ..

提前致谢！

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

Answer 1

您应该在底部移动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>

Answer 2

其他选项是导入第三方库。

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

你可以将这些调用包装在一个函数中，使其不那么难看=）

SAPUI5和JQuery可拖动 - 拒绝混合

2 个答案: