diff --git a/application/controllers/monpas/Compactsop.php b/application/controllers/monpas/Compactsop.php
index b3d853e..a480594 100644
--- a/application/controllers/monpas/Compactsop.php
+++ b/application/controllers/monpas/Compactsop.php
@@ -26,6 +26,7 @@ class  Compactsop extends MY_Controller{
 						"shared/Schooljaren_model",
 						"monfin2/Finbestemmingen_model",
 						"monpas/Versies_model",
+                       
 						"Phantom_model",
 						"monpas/Scores_model",
 						"monpas/Sop_model",
diff --git a/application/libraries/monpas/Schoolafbeeldingen.php b/application/libraries/monpas/Schoolafbeeldingen.php
index b0e0adb..f67c7be 100644
--- a/application/libraries/monpas/Schoolafbeeldingen.php
+++ b/application/libraries/monpas/Schoolafbeeldingen.php
@@ -265,6 +265,7 @@ class Schoolafbeeldingen {
     private function setScoreKleuren($scoretype){
 
 
+
                 $kleur = $this->CI->Scorekleuren_model->getGemiddeldeKleur($scoretype, $this->score->gem);
                 $kleur = $kleur->kleurcode;
                 if(!$kleur) $kleur = '#ffffff';
diff --git a/application/views/monpas/pages/ontwikkel.php b/application/views/monpas/pages/ontwikkel.php
index 2e62a08..d1dc97e 100644
--- a/application/views/monpas/pages/ontwikkel.php
+++ b/application/views/monpas/pages/ontwikkel.php
@@ -262,46 +262,23 @@
                     border: 1px solid #0A246A;"></div>
            </div>
 
-    <ul id="people" data-bind='template: { name: "personTmpl", foreach: omgevingen }'>
-    </ul>
+    <div id="people" data-bind=" foreach: omgevingen ">
 
-    <script id="personTmpl" type="text/html">
-        <li class="draggable" draggable="true" data-bind="event:{
-      dragstart:   function(data, event){
-                    $(event.target).addClass('dragSource')
-                    $root.drag_start_index($index());
-                    return $(event.target).hasClass('draggable');},
-
-       dragend:   function(data, event){
-                   $root.drag_start_index(-1);
-                   $(event.target).removeClass('dragSource')
-                   return true;
-       },
-       dragover:  function(data, event){event.preventDefault();},
-       dragenter: function(data, event){
-                $root.drag_target_index($index());
-                var element = $(event.target)
-                if(element.hasClass('draggable'))
-                     element.toggleClass('dragover');
-                event.preventDefault();
-    },
-       dragleave: function(data, event, $index){
-                var element = $(event.target)
-                if(element.hasClass('draggable'))
-                     element.toggleClass('dragover');
-                event.preventDefault();
-    },
-       drop: function(data, event){
-                $(event.target).removeClass('dragover');
-                console.log('swap', $root.drag_start_index(),  $root.drag_target_index() )
-                $root.fWissel($root.drag_start_index(),  $root.drag_target_index())
-               }
+        <div class="draggable" draggable="true"
+            data-bind="event:{
+                       dragstart: $root.fDragstart.bind($data, event, $index(), 'OMG'),
+                       dragend  : $root.fDragend.bind($data, event, $index()),
+                       dragover :  $root.fDragover.bind($data, event ),
+                       dragenter : $root.fDragenter.bind($data, event, $index()),
+                       dragleave : $root.fDragleave.bind($data, event),
+                       drop      : $root.fDrop.bind($data, event, $index())
              }">
 <!--            <div data-bind="text: afbeelding"></div>-->
 
             <div data-bind='attr: {class: afbeelding}'></div>
-        </li>
-    </script>
+        </div>
+
+    </div>
 
 
 
diff --git a/public/css/images/leeg.png b/public/css/images/leeg.png
new file mode 100644
index 0000000..2534ee8
Binary files /dev/null and b/public/css/images/leeg.png differ
diff --git a/public/css/images/omgevingBlauw.png b/public/css/images/omgevingBlauw.png
new file mode 100644
index 0000000..1c0175f
Binary files /dev/null and b/public/css/images/omgevingBlauw.png differ
diff --git a/public/css/images/omgevingGrijs.png b/public/css/images/omgevingGrijs.png
new file mode 100644
index 0000000..51cd27b
Binary files /dev/null and b/public/css/images/omgevingGrijs.png differ
diff --git a/public/css/images/omgevingGroen.png b/public/css/images/omgevingGroen.png
new file mode 100644
index 0000000..a7c27ce
Binary files /dev/null and b/public/css/images/omgevingGroen.png differ
diff --git a/public/css/images/omgevingOranje.png b/public/css/images/omgevingOranje.png
new file mode 100644
index 0000000..911432f
Binary files /dev/null and b/public/css/images/omgevingOranje.png differ
diff --git a/public/css/images/omgevingRood.png b/public/css/images/omgevingRood.png
new file mode 100644
index 0000000..4646f63
Binary files /dev/null and b/public/css/images/omgevingRood.png differ
diff --git a/public/css/images/omgevingZwart.png b/public/css/images/omgevingZwart.png
new file mode 100644
index 0000000..3f8a3f9
Binary files /dev/null and b/public/css/images/omgevingZwart.png differ
diff --git a/public/js/monpas/models/ontwikkelmodel.js b/public/js/monpas/models/ontwikkelmodel.js
index 433ef47..9149f38 100644
--- a/public/js/monpas/models/ontwikkelmodel.js
+++ b/public/js/monpas/models/ontwikkelmodel.js
@@ -178,20 +178,40 @@ ls.initOntwikkelModel = function(){
 			ingevuld				: ko.observable(false),
 			bezig					: ko.observable(false),
 			verberg					: ko.observable(false),
-			// drag_start_index5       : ko.observable(0),
-			// drag_target_index5      : ko.observable(0),
-			// omgevingen              : ko.observableArray([new fAddIcoon("omgevingGrijs"), new fAddIcoon("leeg"),new fAddIcoon("leeg"),new fAddIcoon("leeg"),new fAddIcoon("leeg"), ]),
-			//
-			// dragging                : ko.computed(function() {
-			// 	if(ls.OntwikkelModel  && ls.OntwikkelModel.drag_start_index5()) {
-			// 		return ls.OntwikkelModel.drag_start_index5() >= 0;
-			// 	}
-			// }),
-			drag_start_index : ko.observable(),
-			drag_target_index : ko.observable(),
-			dragging : ko.computed(function() {
+			drag_start_index0       : ko.observable(0),
+			drag_target_index0      : ko.observable(0),
+			drag_start_index1       : ko.observable(0),
+			drag_target_index1      : ko.observable(0),
+			drag_start_index2       : ko.observable(0),
+			drag_target_index2      : ko.observable(0),
+			drag_start_index3       : ko.observable(0),
+			drag_target_index3      : ko.observable(0),
+			drag_start_index4       : ko.observable(0),
+			drag_target_index4      : ko.observable(0),
+
+			dragging0 : ko.computed(function() {
 				if(ls.OntwikkelModel) {
-					return ls.OntwikkelModel.drag_start_index() >= 0;
+					return ls.OntwikkelModel.drag_start_index0() >= 0;
+				}
+			}),
+			dragging1 : ko.computed(function() {
+				if(ls.OntwikkelModel) {
+					return ls.OntwikkelModel.drag_start_index1() >= 0;
+				}
+			}),
+			dragging2 : ko.computed(function() {
+				if(ls.OntwikkelModel) {
+					return ls.OntwikkelModel.drag_start_index2() >= 0;
+				}
+			}),
+			dragging3 : ko.computed(function() {
+				if(ls.OntwikkelModel) {
+					return ls.OntwikkelModel.drag_start_index3() >= 0;
+				}
+			}),
+			dragging4 : ko.computed(function() {
+				if(ls.OntwikkelModel) {
+					return ls.OntwikkelModel.drag_start_index4() >= 0;
 				}
 			}),
 			omgevingen : ko.observableArray([new fIcoon("omgevingGrijs"), new fIcoon("leeg"), new fIcoon("leeg"), new fIcoon("leeg"), new fIcoon("leeg")]),
@@ -555,87 +575,94 @@ ls.initOntwikkelModel = function(){
 				},'json')	;
 			},
 
-			// fDragstart:   function(data, event, index){
-			// 	var self= ls.OntwikkelModel;
-			// 	console.log("in event", event)
-			// 	console.log("in data", data)
-			// 	console.log("index", index);
-			// 	// $(event.target).addClass('dragSource')
-			// 	self.drag_start_index5(index);
-			// 	return $(event.target).hasClass('draggable');
-			// 	},
-			//
-			// fDragend:   function($data, event){
-			// 	var self= ls.OntwikkelModel;
-			//
-			//  self.drag_start_index5(-1);
-			// 	 $(event.target).removeClass('dragSource')
-			// 	return true;
-			// },
-			// fDragover:  function($data, event){
-			// 	event.preventDefault();
-			//  	},
-			//
-			// fDragenter: function($data, event, index){
-			// 	var self= ls.OntwikkelModel;
-			// 	self.drag_target_index5(index);
-			//
-			// 	var element = $(event.target)
-			// 	if(element.hasClass('draggable'))
-			// 		element.toggleClass('dragover');
-			// 	event.preventDefault();
-			// },
-			//
-			// fDragleave: function($data, event){
-			// 	var element = $(event.target)
-			//
-			// 	if(element.hasClass('draggable'))
-			// 		element.toggleClass('dragover');
-			// 	event.preventDefault();
-			// },
-			//
-			// fDrop: function($data, event){
-			// 	var self= ls.OntwikkelModel;
-			//
-			// 	$(event.target).removeClass('dragover');
-			// 	self.fDragAndDrop(self.drag_start_index5(), self.drag_target_index5())
-			// },
-			//
-			// fDragAndDrop: function(from, to){
-			//
-			// 	var self=ls.OntwikkelModel;
-			// 	console.log(from, "from")
-			// 	console.log(to, "to")
-			// 	if (to > self.omgevingen().length - 1 || to < 0) return;
-			//
-			// 	var fromObj = self.omgevingen()[from]
-			// 	var toObj = self.omgevingen()[to]
-			//
-			// 	self.omgevingen()[to] = fromObj;
-			// 	self.omgevingen()[from] = toObj;
-			// 	console.log(fromObj, "toObj")
-			// 	self.omgevingen.valueHasMutated();
-			// },
+			fDragstart:   function( event, index, parent){
+				var self= ls.OntwikkelModel;
 
+				$(event.target).addClass('dragSource')
+				switch(parent){
 
+					case 'ACC': self.drag_start_index0(index);
+					break;
+					case 'BTR': self.drag_start_index1(index);
+					break;
+					case 'DIF': self.drag_start_index2(index);
+					break;
+					case 'EXT': self.drag_start_index3(index);
+					break;
+					case 'OMG' : self.drag_start_index4(index);
+					break;
+				}
 
-
-				trash : function(index) {
-					var self = ls.OntwikkelModel;
-					self.people.splice(index, 1)
+				return $(event.target).hasClass('draggable');
 				},
 
-				fWissel : function(from, to) {
-					var self = ls.OntwikkelModel;
-					if (to > self.omgevingen().length - 1 || to < 0) return;
+			fDragend:   function( event, index, parent){
+				var self= ls.OntwikkelModel;
+				switch(parent){
+					case 'ACC': self.drag_start_index0(-1);
+						break;
+					case 'BTR': self.drag_start_index1(-1);
+						break;
+					case 'DIF': self.drag_start_index2(-1);
+						break;
+					case 'EXT': self.drag_start_index3(-1);
+						break;
+					case 'OMG': self.drag_start_index4(-1);
+						break;
+				}
+				 $(event.target).removeClass('dragSource')
+				return true;
+			},
+			fDragover:  function( event){
+				event.preventDefault();
+			 	},
 
-					var fromObj = self.basis()[to];//grisd blokje op 0
+			fDragenter: function( event, index, parent){
+				var self= ls.OntwikkelModel;
+				switch(index){
+					case 0: self.drag_start_index0(index);
+						break;
+					case 1: self.drag_start_index1(index);
+						break;
+					case 2: self.drag_start_index2(index);
+						break;
+					case 3: self.drag_start_index3(index);
+						break;
+					case 4: self.drag_start_index4(index);
+						break;
+				}
 
-					var toObj = self.omgevingen()[to];// leeg blokje op 3
-					self.omgevingen()[from] = toObj; //wordt leeg blokje op 0
-					self.omgevingen()[to] = fromObj; //wordt grijsblokje op 3 moet worden groen blokje op s
+				var element = $(event.target)
+				if(element.hasClass('draggable'))
+					element.toggleClass('dragover');
+				event.preventDefault();
+			},
 
-					self.omgevingen.valueHasMutated()
+			fDragleave: function( event){
+				var element = $(event.target)
+
+				if(element.hasClass('draggable'))
+					element.toggleClass('dragover');
+				event.preventDefault();
+			},
+
+			fDrop: function( event, $index){
+				var self= ls.OntwikkelModel;
+
+				$(event.target).removeClass('dragover');
+				self.fWissel(self.drag_start_index5(), self.drag_target_index5())
+			},
+
+
+			fWissel : function(from, to) {
+				var self = ls.OntwikkelModel;
+				if (to > self.omgevingen().length - 1 || to < 0) return;
+
+				var fromObj = self.basis()[to];//grisd blokje op 0
+				var toObj = self.omgevingen()[to];// leeg blokje op 3
+				self.omgevingen()[from] = toObj; //wordt leeg blokje op 0
+				self.omgevingen()[to] = fromObj; //wordt grijsblokje op 3 moet worden groen blokje op s
+				self.omgevingen.valueHasMutated()