2016-11-17 55 views
-1

我想使用SapUI5和JQuery $("#draggable").draggable();函数拖动我的HTML页面上的一些div。 (我想使用JQuery draggable()函数)。这个问题是 - 他们互相干扰 - SAPUI5库也有一个名为draggable的varibale(我想用jQuery draggable()函数)。SAPUI5和JQuery可拖动 - 拒绝混合

,结果我得到Uncaught TypeError: $(...).draggable is not a function(…)

如何解决呢?我的代码在下面..它模拟了这个问题。请注意,一旦我删除SAPUI5的脚本标记,它工作正常,我可以拖动分区..

在此先感谢!

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

+1

看看我的答案[这里](https://stackoverflow.com/questions/37584845/uncaught-typeerror-cannot -use功能于操作者对搜索换位置在-undefin/37585277#37585277) – Dopedev

回答

3

你应该在底部

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

其他选项移动Jquery的脚本是导入第三方库。

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

你可以在一个功能包的调用,使之少丑陋=)