tussenopslag

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>