Solved

drag and drop

Posted on 2013-02-04
15
390 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
Comment Utility
add this option creating the droppable :

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

Author Comment

by:erikTsomik
Comment Utility
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
Comment Utility
could you post your css, thanks.
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
<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
Comment Utility
you've a strange typo error, replace : url: ",
by : url: "",

else the code work fine for me
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
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
Comment Utility
take a look to the picture attached
http://jsfiddle.net/AkUUm/3/
Clipboard01.jpg
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 19

Author Comment

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

Expert Comment

by:leakim971
Comment Utility
Is this part of your original question?
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
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
Comment Utility
with an empty url?
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
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
Comment Utility
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
Comment Utility
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
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)

772 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now