drag and drop

add this option creating the droppable :

drop: function( event, ui ) {
        var options = { //... };
        ui.draggable.droppable(options);
}

it is a good I idea but it does not work for , because I can no longer drop items to the main object.

<script>
      $(function() {

            $( ".draggable" ).draggable({revert: 'invalid'});

             $("#sortable").droppable({

                drop: function(e, ui) {


                  var item_id = $(ui.draggable).attr('id');
                  //alert(item_id);

            $(ui.draggable).css('position', 'static').text('').appendTo(this);

                  //update the database
                   $.ajax({
                        type: "GET",
                        timeout: 10000,
                         dataType: "json",
                         cache:false,
                         contentType: "application/json; charset=utf-8",
                        url: ",
                         success: function(data){
                               
                        }
              });

                  var options2 = {
                        greedy: true,
                        activeClass: "ui-state-hover",
                        hoverClass: "ui-state-active"
                  };

                  ui.draggable.droppable(options2);
                  $(ui.draggable).css('position', 'static').text('').appendTo(this);
        },
        accept: function() {
            return $("#draggable").length < 5;
        }
    });


            
      });

      </script>

the html
<span class="page">
            
<div class="lefty">
                  
<div class="shop-shelf">
                        
Available for Mapping
                  
</div>

                  
<br class="clear-both">

                  
<div class="shop-container">

                        
<ul id="draggableUL">
                              
                                    
<li id="997" class="draggable ui-draggable" style="position: relative;">
test1</li>
<li id="998" class="draggable ui-draggable" style="position: relative;</li>test2</li>
<li id="1000" class="draggable ui-draggable" style="position: relative;">
test3</li>
<li id="1001" class="draggable ui-draggable" style="position: relative;">test4
</li>
<li id="1002" class="draggable ui-draggable" style="position: relative;">
test5</li>
</ul>

      
</div>
            
</div>

            
<div class="righty">
                  
<div class="shop-shelf">
                        
Mapped Questions
                  
</div>

                  
<br class="clear-both">

                  
<ul class="sortable ui-droppable" id="sortable"></ul>



            
</div>
      
</span>

could you post your css, thanks.

<style>
p {
    font-size: 14px;
    font-weight: bold;
    margin: 1em 0 2.5em;
}
      .page {
          float: left;
                margin: 10px;
                padding: 10px;
      }
            .lefty {
                      float: left;
                      margin: 0 30px 0 0;
                      width: 355px;
                   /*
border: 1px solid blue;
*/
            }

            .righty {
                      float: left;
                      height: 400px;
                 overflow: auto;
                      /*
width: 400px;
*/
                  /*
 border: 1px solid yellow;
*/
            }

            .shop-container { float: left; border: 1px solid #000; width: 356px; }
            .shop-shelf {
                  float: left;
                  font-size: 18px;
                font-weight: bold;
            }

            .clear-both { clear:both; }

            .droppable {
                   float: left;
                   width: 360px;
                   height: 150px;
                   padding: 0em;
                   float: left;
             }
            .draggable {
                  width: 360px;
                  height: auto;
                  padding: 0em;
                  /*
                        margin: 8px 10px 8px 20px;
                  */
                   cursor: hand;
                   cursor: pointer;
                   border: 1px solid #000;
             }

            .sortable {
                  float: left;
                  width: 300px;
                  min-height: 50px;
                  padding: 0.5em;
                  float: left;
                  margin: 8px 10px 8px 20px;
                  cursor: hand;
                  cursor: pointer;
                  border: 1px dotted red; }


      ul#draggableUL, ul#sortable{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; width:352px;}
      li.draggable { margin: 5px; padding: 5px; width: 330px; }



* {
    margin: 0;
    padding: 0;
}
      </style>

you've a strange typo error, replace : url: ",
by : url: "",

else the code work fine for me

well the code works ofr me too however I can not no longer drop into the sortable only into the new dropped item

where would I add the ajax call to the database to update the droppable box

Is this part of your original question?

it was in there. I do the database when i drag and drop into the original box but once  it is dropped it becomes also a droppable area , so that the area that i would like to update the database

with an empty url?

the one with empty url is to update the database and put it in the main div, i need another ajax request to update the droppable area that was dragged into the small box

OK, so it's something new, you asked to set your draggable as droppable, you got the code for
You should open a new question or let me know why it don't work on your side
Currently I'm just seeing a new question

I agree. my new post is here
https://www.experts-exchange.com/questions/28019737/jquery-draggable-database-update.html

And i have decided to simplify visual a little bit and add static <li> to the droppable so if the user want to simply add a question they will just drop into add a question . so i change the code now and it does not work visually for me. Because before I was dropping into sortable div (that where I want all the <li> to be ) now i will drop into goesHere id (the ID of the static <li>) . How Would i copy dropped <li> into sortable to static li will remains empty at all times