Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

drag and drop

Posted on 2013-02-04
15
395 Views
Last Modified: 2013-02-04
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.
0
Comment
Question by:erikTsomik
  • 8
  • 7
15 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38851873
add this option creating the droppable :

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

Author Comment

by:erikTsomik
ID: 38852007
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38852056
could you post your css, thanks.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 19

Author Comment

by:erikTsomik
ID: 38852152
<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
 
LVL 82

Expert Comment

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

else the code work fine for me
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38852221
well the code works ofr me too however I can not no longer drop into the sortable only into the new dropped item
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38852284
take a look to the picture attached
http://jsfiddle.net/AkUUm/3/
Clipboard01.jpg
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38852496
where would I add the ajax call to the database to update the droppable box
0
 
LVL 82

Expert Comment

by:leakim971
ID: 38852511
Is this part of your original question?
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38852541
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38852549
with an empty url?
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38852704
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38852724
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 38852794
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 38853675
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

Featured Post

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jquery datatables, asp.net MVC 9 51
file upload jquery, send variables 3 37
Jquery keyup 4 25
Is there a way to bind the ID to the text value of the search result? 28 51
jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question