1. <div id="a1" class="answerCard noselect">1</div>
2. <div id="a2" class="answerCard noselect">2</div>
   
3. <div id="a3" class="answerCard noselect">3</div>
   
4. <div id="a4" class="answerCard noselect">4</div>
   
5. <div id="a5" class="answerCard noselect">5</div>

CSS

1. .answerCard {
   
2.       position: absolute;
   
3.       top: 0px;
4.       left: 0px;
   
5.       width: 150px;
   
6.       height: 150px;   
   
7.       font-size: 120px;
   
8.       font-weight: 700;
   
9.       color: #fff;
   
10.       text-align: center;   
    
11.       background-color: red;
    
12.       line-height: 150px;
    
13.       cursor: pointer;
    
14.       box-shadow: 10px 10px 25px #888888;
    
15.       z-index: 2;
16. }
    

once a div is 'dropped', the 'box-shadow' is 'detached'. If the user decides they want to move the dropped div elsewhere how can I re-attach the 'box-shadow' to the div until it is dropped in another location, where it should again be detached?

jQuery

1. $('.answerCard').draggable({
   
2.       stack: '.answerCard'      
   
3. });

1. $('.dropLeft').droppable({
   
2.       drop: function(event, ui) {
   
3.       $(ui.draggable).detach().css({
   
4.             top: 0,
5.             left: 600,
6.             boxShadow: 'None'
7.             }).appendTo(this)
8.       }
   
9. });

I've tried:

1. .css({'box-shadow': '10px 10px 25px #888888'}).appendTo(this);

and

1. $(ui.draggable).css({'box-shadow': '10px 10px 25px #888888'}).appendTo(this);
   

but without success... Is there any way to achieve this?