drag and drop

I am trying to use drag and drop functionality and it is partially works. So when I drag and drop it works. The question that I have I need to make the item that I just dropped also to be  a droppable object.
LVL 19
erikTsomikSystem Architect, CF programmer Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
take a look to the picture attached
http://jsfiddle.net/AkUUm/3/
Clipboard01.jpg
0
 
leakim971PluritechnicianCommented:
add this option creating the droppable :

drop: function( event, ui ) {
        var options = { //... };
        ui.draggable.droppable(options);
}
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
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>
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
leakim971PluritechnicianCommented:
could you post your css, thanks.
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
<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>
0
 
leakim971PluritechnicianCommented:
you've a strange typo error, replace : url: ",
by : url: "",

else the code work fine for me
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
well the code works ofr me too however I can not no longer drop into the sortable only into the new dropped item
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
where would I add the ajax call to the database to update the droppable box
0
 
leakim971PluritechnicianCommented:
Is this part of your original question?
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
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
0
 
leakim971PluritechnicianCommented:
with an empty url?
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
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
0
 
leakim971PluritechnicianCommented:
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
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
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
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.