OK, so I’m starting to go a little bit crazy now. Something that should be so simple is proving really hard to achieve. I’ve dumped the sliding menu and am now just using a totally clean and empty app structure so that I can get the drag and drop working in basic form. I realised that the drag and drop that I managed to get working was just a jquery version and so wouldn’t bind to ng-repeat etc in the views. So I have to find an angular version.
I have managed to get http://codef0rmer.github.io/angular-dragdrop/#/ working locally perfectly in a basic html site (not a monaca project). The local project is a single file with angular-dragdrop.min.js reference as follows:
Index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head lang="en">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="angular-dragdrop.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.js"></script>
<script>
var App = angular.module('MyApp', ['ngDragDrop', 'ui.bootstrap']);
App.controller('myController', function ($scope, $q) {
});
</script>
</head>
<body>
<h2>Dragging test</h2>
<div ng-controller="myController">
<div class="btn btn-primary" data-drag="true" jqyoui-draggable="{animate: true}" style="background-color:rebeccapurple; padding:20px; width:100px;">DRAG ME!!!</div>
</div>
</body>
</html>
So I then went to try and replicate this in monaca, but I don’t seem to be able to. I have the following JS components installed in my build config:
…which seems to cover things. I find the way that the JS components are installed confusing though because you have to select all the files to be loaded for each of the components.
The following is the code that I have in my monaca app now. I believe this should be working in the browser. I guess I’d need touch-punch for mobile support, but for now, one thing at a time.
<!DOCTYPE HTML>
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<script>
var myApp = angular.module("MyApp", [
'onsen',
]);
myApp.controller('MyController',function($scope){
});
</script>
</head>
<body>
<h2>Dragging test</h2>
<div ng-controller="MyController">
<div class="btn btn-primary" data-drag="true" jqyoui-draggable="{animate: true}" style="background-color:rebeccapurple; padding:20px; width:100px;">DRAG ME!!!</div>
</div>
</body>
</html>
No errors display in the Firebug console. It just fails silently.
Does anyone have any idea why this wouldn’t be working please?
Does it matter in what order I add the components by the way? It seems that if you add jquery after other things that depend on it then it shows as a reference error saying “Jquery is not defined”. If so, is it possible to re-order the components to avoid having to go through the time consuming installation process (the interface is slow) over again? Or at least is there a way to select all files when adding a component? That way I could select all and then deselect the few that aren’t required.
Or is there a way to download and include the the files that are in my offline version and include them in the loading sequence within monaca to ensure that the components being loaded are the same as my local test?
Basically, ANYTHING that will get this working.
Thanks in advance!
ps - if anyone fancies quoting me for creating a working version of this I would consider paying. Draggable elements would need to be able to be bound to an ng-repeat and drop events triggered as per the angular-dragdrop plugin. Thanks.
