multiple dropzones function. person image does not copy, delete is disabled.

app/views/aspects/manage.html.haml

@@ -16,7 +16,7 @@
   %h3=t('.requests')
 
   .requests
-    %ul.dropzone
+    %ul
       - if @remote_requests.size < 1
         %li No new requests
       - else
@@ -44,23 +44,35 @@
             %span.tip click to edit
 
           %ul.tools
-            %li= link_to t('.add_a_new_friend'), "#add_request_pane_#{aspect.id}", :class => 'add_request_button'
             %li!= remove_link(aspect)
 
-        %ul.dropzone{:data=>{:aspect_id=>aspect.id}}
+
+        %ul.people{:data=>{:aspect_id=>aspect.id}}
           -for person in aspect.people
             %li.person{:data=>{:guid=>person.id, :aspect_id=>aspect.id}}
               .delete
                 .x
-                  X
+                  = link_to "X", "#remove_person_pane", :class => "remove_person_button"
                 .circle
               = person_image_tag(person)
-          .draggable_info
-            Drag to add people
 
+          %li.dropzone_targets
+            %span.dropzone.add_person
+              = link_to "Add person", "#add_request_pane_#{aspect.id}", :class => 'add_request_button'
+            %span.dropzone.move_person
+              = link_to "Move person", '#'
 
 
           .fancybox_content
             %div{:id => "add_request_pane_#{aspect.id}"}
               = render "requests/new_request", :aspect => aspect
 
+
+  .fancybox_content
+    #remove_person_pane
+      .span-12.last
+        .modal_title_bar
+          %h4 Remove from aspect
+
+        .person
+

public/javascripts/aspect-edit.js

@@ -21,48 +21,62 @@ function decrementRequestsCounter() {
 
 // Dragging person between aspects
 $(function() {
-  $("ul .person").draggable({
+  $(".person").draggable({
     revert: true,
     start: function(event,ui){
       $(this).children("img").animate({'height':80, 'width':80, 'opacity':0.8},200);
-      $(".draggable_info").fadeIn(100);
+      $(".dropzone").fadeIn(100);
     },
     stop: function(event,ui){
       $(this).children("img").animate({'height':70, 'width':70, 'opacity':1},200);
-      $(".draggable_info").fadeOut(100);
     }
   });
 
-  $(".aspect ul.dropzone").droppable({
+  $(".dropzone", ".aspect").droppable({
     hoverClass: 'active',
     drop: function(event, ui) {
 
       var dropzone = $(this);
       var person   = ui.draggable;
+      var aspect   = dropzone.closest(".aspect");
 
       if( person.hasClass('request') ){
         $.ajax({
           type: "DELETE",
           url: "/requests/" + person.attr('data-guid'),
-          data: {"accept" : true, "aspect_id" : dropzone.attr('data-aspect_id') },
+          data: {"accept" : true, "aspect_id" : aspect.attr('data-guid') },
           success: function(data){
             decrementRequestsCounter();
           }
         });
       };
 
-      if( dropzone.attr('data-aspect_id') != person.attr('data-aspect_id' )){
+      if( aspect.attr('data-guid') != person.attr('data-aspect_id' )){
+
+        if( dropzone.hasClass("move_person") ){
           $.ajax({
             url: "/aspects/move_friend/",
             data: {"friend_id" : person.attr('data-guid'),
                    "from"      : person.attr('data-aspect_id'),
-                 "to"        : { "to" : dropzone.attr('data-aspect_id') }},
+                   "to"        : { "to" : aspect.attr('data-guid') }},
             success: function(data){
-            person.attr('data-aspect_id', dropzone.attr('data-aspect_id'));
+              person.attr('data-aspect_id', aspect.attr('data-guid'));
             }});
-        }
 
-      $(this).closest("ul").append(person);
+          $("ul.people li:last", aspect).before(person);
+
+        } else {
+          $.ajax({
+            url: "/aspects/add_to_aspect/",
+            data: {"friend_id" : person.attr('data-guid'),
+                   "aspect_id" : aspect.attr('data-guid') },
+            success: function(data){
+              person.attr('data-aspect_id', aspect.attr('data-guid'));
+            }});
+    
+          $("ul.people li:last", aspect).before(person);
+        }
+      }
     }
   });
 
@@ -87,7 +101,7 @@ $(function() {
                   'aspect_id' : person.attr('data-aspect_id') }
           });
         }
-      person.fadeOut('slow', $(this).remove());
+      person.fadeOut('slow', function(){person.remove()});
       }
     }
   });
@@ -97,6 +111,7 @@ $(function() {
 
 
 // Person deletion
+
 $(".delete").live("click", function() {
 
   var person = $(this).closest("li.person");
@@ -117,9 +132,10 @@ $(".delete").live("click", function() {
 
   } else {
 
-    if( confirm("Remove this person from all aspects?") ){
     var person_id = $(this).closest("li.person").attr('data-guid');
 
+
+    /*
     $.ajax({
       type: "DELETE",
       url: "/people/" + person_id,
@@ -127,7 +143,8 @@ $(".delete").live("click", function() {
         person.fadeOut(200);
       }
     });
-    }
+
+    */
   }
 });
 

public/javascripts/view.js

@@ -30,6 +30,7 @@ $(document).ready(function(){
   $("#add_request_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false });
   $(".invite_user_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false });
   $(".add_request_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false });
+  $(".remove_person_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false });
   $(".question_mark").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false });
 
   $("input[type='submit']").addClass("button");

public/stylesheets/sass/application.sass

@@ -938,49 +938,71 @@ h1.big_text
         &:last-child
           :margin
             :right 0
+
+ul#aspect_list
+  :list
+    :style none
+  :padding 0
+  :margin 0
+
 .aspect,
 .requests,
 .aspect_remove
-  :list
+  :position relative
-    :style none
   :color #999
   :cursor default
   :text-shadow 0 1px #fff
 
-  ul.dropzone
+
-    :position relative
+  .dropzone
-    :min-height 20px
+    :display inline-block
-    :margin 0
-      :bottom 25px
     
     :-webkit-border-radius 10px
     :-moz-border-radius 10px
     :border-radius 10px
 
-    :list
+    :margin 5px
-      :style none
-    :padding 15px
     :border 2px dashed #ccc
 
+    :height 70px
+    :max-height 70px
+    :width 70px
+    :max-width 70px
+
     &.active
       :background
         :color rgba(255,252,127,0.2)
 
-    .draggable_info
+    a
-      :position absolute
+      :display block
-      :display none
+      :height 100%
-      :right 15px 
+      :padding
-      :bottom 10px 
+        :top 12px
+      :text
+        :align center
       :font
-        :style italic
         :size 14px
-      :color #aaa
+
+      :color #999
+
+      &:hover
+        :color #666
+
+  ul
+    :list
+      :style none
+    :min-height 20px
+    :margin 0
+      :bottom 25px
+    :padding 0
+
+    li
+      :display inline-block
 
   .person
-    :display inline-block
     :cursor move
     :z-index 10
-    :position relative
+    :top 0
     :padding 0
     :margin 5px
 
@@ -1034,8 +1056,15 @@ h1.big_text
       .x
         :z-index 2
         :position absolute
+        :padding
           :top 2px
           :left 7px
+        a
+          :cursor default
+          :display block
+          :height 100%
+          :text-shadow none
+          :color #eee
 
       &:hover
         :cursor default