ont avatar ont committed 6f56acd

(b) backuping sortDrag code

Comments (0)

Files changed (4)

     margin: auto;
     z-index: 100;
 }
+
+.mtg-centered {
+    text-align: center;
+}
 	</div>
 
 	<div class="row">
+        <div class="large-12 columns mtg-centered" style="position: relative">
+            <span ng-repeat="field in sfields">
+                <a drag-sort class="tiny button">{{field}}</a> ⇢
+            </span>
+        </div>
+	</div>
+
+	<div class="row">
 		<div class="large-12 columns">
             <ul class="large-block-grid-6 mtg-cards-grid">
                 <li ng-repeat="own in owns | orderBy:'card.tough'">

js/controllers.js

     cards = Restangular.all('cards');
 
     $scope.owns = owns.getList();
+    $scope.sfields = ['name', 'cost', 'power', 'tough'];
 
     var prs = null;
     $http.get('/js/peg.tpl').then(function(res){
         }
     };
 });
+
+/*
+ * Sortable: drag'n'drop sorting for elements
+ */
+widgets.directive('dragSort', function(){
+    return {
+        restrict: 'A',
+        link: function(scope, elem, attrs){
+            var drag = false;
+
+            function offset( elem ){
+                var doc,
+                    box = { top: 0, left: 0 };
+
+                doc = document.documentElement;
+                elem = elem[0];  // jqlight to DOM
+
+                if ( typeof elem.getBoundingClientRect !== undefined ) {
+                    box = elem.getBoundingClientRect();
+                }
+
+                return {
+                    top: box.top   + (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0),
+                    left: box.left + (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0)
+                };
+            }
+
+            /// find first non-static parent
+            var box = elem.parent();
+            while(box = box.parent())
+            {
+                var pos = box.css('position');
+                if( pos != '' || pos != 'static' )
+                    break;
+            }
+            if( !box )
+                box = angular.element(document.body);
+
+            var bOff, eOff, sX, sY;
+
+            elem.bind('mousedown', function( e ){
+                console.log('mousedown');
+
+                sX = e.pageX;
+                sY = e.pageY;
+
+                bOff = offset( box );
+                eOff = offset( elem );
+                console.log(bOff, eOff);
+
+                drag = true;
+
+                elem.css('position', 'absolute');
+                elem.css({ 'top' : eOff.top - bOff.top + 'px', 'left' : eOff.left - bOff.left + 'px' });
+
+                e.preventDefault();
+            });
+
+            elem.bind('mousemove', function( e ){
+                if(!drag) return;
+
+                var dX = e.pageX - sX;
+                var dY = e.pageY - sY;
+
+                elem.css({
+                    'top'  : eOff.top  - bOff.top  + dY + 'px',
+                    'left' : eOff.left - bOff.left + dX + 'px'
+                });
+            });
+
+            elem.bind('mouseup', function( e ){
+                drag = false;
+                console.log('mouseup');
+                elem.css('position', 'stat');
+
+                e.preventDefault();
+            });
+        }
+    };
+});
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.