1

Im trying to create a page in which users can search for items on the left side of the page, and drag and drop the items they want onto the right, kind of like a shopping cart.

I have been using 

 $(function() {
 $(".result").draggable({
    helper: function(event, ui) {
    return $(this).clone().children("img");
    }
    });

    $("#rightcol").droppable({
        accept: ".result",
        drop: function(event,ui){
        $(this).append($(ui.draggable).clone());
        //console.log($(ui.draggable));
        }
        });

});

for the drag & drop which works how I was hoping for, but whatever the user drags onto the the right side (#rightcol) is lost when a new search is submitted. I have tried changing the form submit to use ajax with jquery like this

 $(document).ready(function() {
          $("#form").submit( function () {    
          $.post(
           'p_search.php',
            $(this).serialize(),
          function(data){
              //data is what i want to be draggable
              //call other function here
              $(".build").html(data).load();
            }
          );
          return false;   
        });   

 });

Which works great, but the divs(.result) are not draggable. Is there a way to easily initialize the (.result) elements without refreshing the page?

tshepang
  • 12,111
  • 21
  • 91
  • 136
dreuv2
  • 23
  • 3

1 Answers1

1

I believe they're not draggable because they were created after you've defined which items are draggable.
(meaning - they're created after the $(".result").draggable(... call.)
I think you should take a look at live()

J. Ed
  • 6,692
  • 4
  • 39
  • 55
  • `.live()` handles events, not initialisation of new objects per se. – Orbling Jul 24 '11 at 19:32
  • 1
    @Orbling: you're right. suggestions here may be worth looking into: http://stackoverflow.com/questions/3494293/bind-ready-event-on-javascript-dom-element-creation. The highest-voted answer to the question you've linked to also provides a seemingly very good and elegant solution. – J. Ed Jul 24 '11 at 20:43
  • I've tried live but wasn't able to get it to work like i was hoping, Im pretty new to jquery but i think i just need to name the drag function, and call it in function(data) – dreuv2 Jul 25 '11 at 00:33
  • have you tried plugging into the `load` event- `$(".result").live('load', function() {...});`? can you explain what isn't working? – J. Ed Jul 25 '11 at 06:49