Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

drag and drop

Posted on 2013-02-04
15
Medium Priority
?
402 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
[X]
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
  • 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
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 2000 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

What is a Denial of Service (DoS)?

A DoS is a malicious attempt to prevent the normal operation of a computer system. You may frequently see the terms 'DDoS' (Distributed Denial of Service) and 'DoS' used interchangeably, but there are some subtle differences.

Question has a verified solution.

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

The most up-to-date version of this article is on my Blog https://iconoun.com/blog/
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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…

715 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