2016-11-17 1 views
-1

Ich versuche, SapUI5 und JQuery $("#draggable").draggable(); Funktion zu verwenden, um einige div um meine HTML-Seite zu ziehen.SAPUI5 und JQuery ziehbar - verweigern zu mischen

Problem ist - sie stören sich gegenseitig - SAPUI5-Bibliothek haben auch eine Varibale namens draggable (ich möchte JQuery ziehbare() Funktion) verwenden.

als Folge ich Uncaught TypeError: $(...).draggable is not a function(…)

wie es zu lösen? Mein Code ist unten .. Es simuliert das Problem. Beachten Sie, dass, sobald ich die Skript-Tag von SAPUI5 entfernen, es funktioniert gut und ich kann die div ..

Vielen Dank im Voraus!

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

überprüfen meine Antwort aus [hier] (https://stackoverflow.com/questions/37584845/uncaught-typeerror-cannot -use-in-operator-zu-suchen-für-Position-in-undefin/37585277 # 37585277) – Dopedev

Antwort

3

Sie sollten den JQuery-Skripte an der Unterseite

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

Andere Option bewegen ist, um die Bibliotheken von Drittanbietern zu importieren.

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

Sie könnten diese Anrufe in einer Funktion wickeln, damit es weniger hässlich =)