CODEWITHSUNDEEP
javascriptjqueryajaxjquery-uidrag-and-drop
bhamner
bhamner

Reputation: 447

Jquery Drag and Drop on Ajax loaded Div

I want to be able to drag an element on the page into a droppable element inside an ajax loaded div. I can get the code to work when I place the droppable element in the regular page but not when i have the same element on the ajax loaded div. Im pretty sure its because of the way I'm calling scripts and how they load on the dom, but I can't find the solution. Note: I have tried calling the code which loads the ajax content before calling jquery ui but that didn't work either. Here is how I'm calling everything, I removed the extraneous code for brevity.

main page

<head>
<scripts -- jquery, jquery ui>
<script>
  $(document).ready(function(){
      $( "#site-preview" ).load( "/site/preview" );
   });
</script>
</head>
<body>

<div class="draggable><img src=//etc/> </div>

//if I put this div here, I can drop to it, so i know the drop code works.
// <div class="droppable col-md-2" style="height:100px;border:1px solid gray"><p> </p></div>

<div id="site-preview"></div>

<script>
  $(function() {
    $( ".draggable" ).draggable({
      helper:'clone',
      appendTo: 'body',
      scroll: false
     });
$( ".droppable" ).droppable({
      drop: function( event, ui ) {
        $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
      }
    });
  });
  </script>


</body>

ajax loaded code

<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
  <p> </p>
</div>

Upvotes: 1

Views: 4227

Answers (3)

DanielST
DanielST

Reputation: 14133

Ajax is Asynchronous. So if you call some ajax and then call some other command, the ajax will usually finish afterwards.

This is where callbacks are useful. Try adding a callback to the ajax load call as shown here: http://api.jquery.com/load/

Something like:

$( "#site-preview" ).load( "/site/preview", function(){
    $( ".droppable" ).droppable({
        drop: function( event, ui ) {
            $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
        }
    });
});

Side note: you should probably start using scripts instead of <script> tags.

Upvotes: 0

gaelgillard
gaelgillard

Reputation: 2523

This appends because you try to call the droppable on a non-existing element at that moment. To solve this, you could use the callback function that can be attached to the load function and run the rest after that.

$(document).ready(function(){
  $("#site-preview").load("/site/preview", function() {
    // Page loaded and injected
    // We launch the rest of the code
    $( ".draggable" ).draggable({
      helper:'clone',
      appendTo: 'body',
      scroll: false
     });
    $( ".droppable" ).droppable({
      drop: function( event, ui ) {
        $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
      }
    });
  });
});

You can find other information about the load function here. The callback can take arguments and can be used, for example to check if it's a 404 or not.

Upvotes: 2

bhamner
bhamner

Reputation: 447

Well I was able to get it to work by adding the draggable/droppable code to the ajax loaded div itself. So the above would be amended like so

ajax loaded code

<div class="droppable col-md-2" style="height:100px;border:1px solid gray">
  <p> </p>
</div>

<script>
  $(function() {
    $( ".draggable" ).draggable({
      helper:'clone',
      appendTo: 'body',
      scroll: false //stops scrolling container when moved outside boundaries
    });
$( ".droppable" ).droppable({
      drop: function( event, ui ) {
        $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
      }
    });
  });
  </script>

And those script lines would be taken out of the main page

Upvotes: 0

Related Questions