<html ng-app="appname">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/page-scale.css" />
<script src="js/modernizr.custom.js"></script>
<script>
var imagearray=[
{
"bildname":"Frau",
"bildaddresse":"comicfrau1.png",
"bildsyle":{}
},
{
"bildname":"Mann",
"bildaddresse":"comicmann1.png",
"bildsyle":{"color":"black"}
}
];
var stringfotodata=JSON.stringify(imagearray),req = {
method: 'POST',
url: 'http://example.com/php/serv.php',
headers: {
'Content-Type': 'JSON'
},
data: { 'fotodata': stringfotodata}
}
$http(req).then(function(){...}, function(){...});
var x = (function() {
"use strict";
var app = angular.module('TutorialAnwendung', []);
app.controller('TutorialController', ['$scope',
function($scope){
var imagecontroller=this;
imagecontroller.imagearray=[{...}];
imagecontroller.dropzone=[{"id":-1},{"id":-1}];//Anzahl gleich imagearray
imagecontroller.send =function(){
var result=[];
//ID's in dropzone sind nun entweder -1, oder der index vom imagearray, die Reihenfole ist der gewählten gleich
//For-each ...
angular.forEach(imagecontroller.dropzone, function(value) {
//if not -1
result.push(obj);
}, result);
}
}]);
});
</script>
</head>
<div class="content"></div>
<body ng-controller="TutorialController as ImageCtrl">
<div id="grid" class="grid clearfix">
<div class="grid__item" style="position: relative;" ng-repeat="image in ImageCtrl.imagearray" id="{{$index}}>
<img src="{{image.bildaddresse}}" alt="{{image.bildname}}" style="{{image.bildsyle}}" />
</div>
<div class="grid__item" style="position: relative;" ng-repeat="image in ImageCtrl.imagearray" id="{{$index}}>
<img src="{{image.bildaddresse}}" alt="{{image.bildname}}" style="{{image.bildsyle}}" />
</div>
</div>
<div id="drop-area" class="drop-area">
<div>
<div class="drop-area__item">
<div>
<div class="drop-area__item" ng-repeat="dropitem in ImageCtrl.dropzone" id="{{$index}}"><div><div class="dummy"><input type="hidden" ng-model="dropitem.id"/></div></div></div>
<div class="drop-area__item" ng-repeat="dropitem in ImageCtrl.dropzone" id="{{$index}}"><div><div class="dummy"><input type="hidden" ng-model="dropitem.id"/></div></div></div>
</div>
</div>
<button type="button" ng-click="ImageCtrl.send()">Click Me!</button>
<div class="drop-overlay"></div>
</div>
</div>
</div>
<script src="js/draggabilly.pkgd.min.js"></script>
<script src="js/dragdrop.js"></script>
<script>
(function() {
var body = document.body,
dropArea = document.getElementById( 'drop-area' ),
droppableArr = [], dropAreaTimeout;
// initialize droppables
[].slice.call( document.querySelectorAll( '#drop-area .drop-area__item' )).forEach( function( el ) {
droppableArr.push( new Droppable( el, {
onDrop : function( instance, draggableEl ) {
// show checkmark inside the droppabe element
classie.add( instance.el, 'drop-feedback' );
var input=document.getElementById( instance.el.id).getElementsByTagName('input')[0];
input.value=instance.el.id;
clearTimeout( instance.checkmarkTimeout );
instance.checkmarkTimeout = setTimeout( function() {
classie.remove( instance.el, 'drop-feedback' );
}, 800 );
// ...
}
} ) );
} );
// initialize draggable(s)
[].slice.call(document.querySelectorAll( '#grid .grid__item' )).forEach( function( el ) {
new Draggable( el, droppableArr, {
draggabilly : { containment: document.body },
helper : true,
onStart : function() {
// add class 'drag-active' to body
classie.add( body, 'drag-active' );
// clear timeout: dropAreaTimeout (toggle drop area)
clearTimeout( dropAreaTimeout );
// show dropArea
classie.add( dropArea, 'show' );
},
onEnd : function( wasDropped ) {
var afterDropFn = function() {
// hide dropArea
classie.remove( dropArea, 'show' );
// remove class 'drag-active' from body
classie.remove( body, 'drag-active' );
};
if( !wasDropped ) {
afterDropFn();
}
else {
// after some time hide drop area and remove class 'drag-active' from body
clearTimeout( dropAreaTimeout );
dropAreaTimeout = setTimeout( afterDropFn, 400 );
}
}
} );
} );
})();
</script>
</body>
</html>
