sortable

assets/javascripts/decks.coffee

@@ -106,7 +106,9 @@ class Deck extends Spine.Controller
         main_count += card_usage.count
         category_count[(category for category in card.card_type when category in Card.categories).pop()] += card_usage.count
     @html $('#deck_template').tmpl({main: @main, side: @side, extra: @extra, main_count: main_count, side_count: side_count, extra_count: extra_count, category_count: category_count})
-    $('.card_usage').draggable()
+    $( ".deck_part" ).sortable(
+      connectWith: ".deck_part"
+    ).disableSelection();
     if $('.operate_area').hasClass('text')
       @el.jscroll({W: "12px", Btn:
         {btn: false}});

assets/javascripts/decks.js

@@ -279,7 +279,9 @@
         extra_count: extra_count,
         category_count: category_count
       }));
-      $('.card_usage').draggable();
+      $(".deck_part").sortable({
+        connectWith: ".deck_part"
+      }).disableSelection();
       if ($('.operate_area').hasClass('text')) {
         this.el.jscroll({
           W: "12px",

assets/stylesheets/decks.less

@@ -175,11 +175,12 @@ body{margin:0;padding:0;background:#eee;}
   fieldset{
     border:1px solid #cccccc;padding:5px;margin:14px 0 0 0;background:#F9F9F9;border-radius:6px;font-size:12px;color:#666666;//height:586px;
     legend{font-size:14px;color:#666666;margin:0 0 0 8px;font-size:14px;}
+
+    .card_usage{margin: 3px 3px 3px 0; padding: 1px; float: left; width: 44px; height: 64px; }
   }
 }
 .search_data.graphic{width:162px;height:700px;float:right;
   overflow: hidden;
-
 }
 
 

decks/index.html

@@ -86,19 +86,25 @@
                     <span class="deck_category_count ${$index}">${$value}</span>{{/each}})
                 </small>
             </legend>
-            {{tmpl(main) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
+            <div class="deck_part main">
+                {{tmpl(main) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
+            </div>
         </fieldset>
         <fieldset id="deck_side">
             <legend id="deck_side_title" class="deck_title main">副卡组
                 <small>(${side_count})</small>
             </legend>
-            {{tmpl(side) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
+            <div class="deck_part side">
+                {{tmpl(side) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
+            </div>
         </fieldset>
         <fieldset id="deck_extra">
             <legend id="deck_extra_title" class="deck_title main">额外卡组
                 <small>(${extra_count})</small>
             </legend>
-            {{tmpl(extra) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
+            <div class="deck_part extra">
+                {{tmpl(extra) '#card_usage_' + ($('.operate_area').hasClass('text') ? 'text' : 'graphic') + '_template'}}
+            </div>
         </fieldset>
     </script>
 </head>