jQuery UI Drop/Drag data from sql are not draggable/droppable

Question

I'm playing around with jQuery UI Drop/Drap using the Photo Manager example provided by jqueryui.com. What I'm trying to achieve is to it as a photo manager but with data auto generated from an sql database. I've managed to fill the draggable <div> with data from the database and images can be dropped in the droppable <div> like in the example and so i'm storing that data back in the database (different table) so the next time the users relog or refresh the page they will be able to see the images that have been dropped in the droppable <div>, so far so good. The problem is that the data generated for the droppable <div> aren't draggable, only the images that have been dropped from the draggable <div> without refresing the page are draggable and droppable back to draggable <div>.

jquery ui code

$(function() {

      var $available_for_share = $( "#available-for-share" ),
      $currently_sharing = $( "#currently-sharing" );

      // let the available_for_share items be draggable
      $( "li", $available_for_share ).draggable({
            cancel: "a.ui-icon", // clicking an icon wont initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: $( "#sharing" ).length ? "#sharing" : "document", // stick to demo-frame if present
            helper: "clone",
            cursor: "move"
      });

      // let the available_for_share be droppable as well, accepting items from the currently-sharing
      $available_for_share.droppable({
            accept: "#currently-sharing  li",
            activeClass: "custom-state-active",
            drop: function( event, ui ) {
                  currently_sharing( ui.draggable );
            }
      });

      // let the currently-sharing be droppable, accepting the available_for_share items
      $currently_sharing.droppable({
            accept: "#available-for-share > li",
            activeClass: "ui-state-highlight",
            drop: function( event, ui ) {
                  available_for_share( ui.draggable );
            }
      });


      function available_for_share( $item ) {
            var arr = {};
            arr['list_id'] = list_id();
            arr['share_with'] = $item.attr('id');
            $.post('<?= site_url() ?>/lists/js_share_with', arr,function(str){
                  str = $.parseJSON(str);
                  if(str['status'] == 0){
                        info_bar(str['status'],str['msg']);
                  } else {
                        info_bar(str['status'],str['msg']);
                        $item.fadeOut(function() {
                              var $list = $( "ul", $currently_sharing ).length ?
                                    $( "ul", $currently_sharing ) :
                                    $( "<ul class='available-for-share ui-helper-reset'/>" ).appendTo( $currently_sharing );
                              $item.find( "a.ui-icon-trash" ).remove();
                              $item.appendTo( $list ).fadeIn();
                        });
                  }
            })

      }


      function currently_sharing( $item ) {
            var arr = {};
            arr['list_id'] = list_id();
            arr['stop_sharing'] = $item.attr('id');
            $.post('<?= site_url() ?>/lists/js_stop_sharing', arr,function(str){
                  str = $.parseJSON(str);
                  if(str['status'] == 0){
                        info_bar(str['status'],str['msg']);
                  } else {
                        $item.fadeOut(function() {
                              $item
                              .appendTo( $available_for_share )
                              .fadeIn();
                        });
                        info_bar(str['status'],str['msg']);
                  }                                    
            })
      }

HTML

<div id="sharing" class="col3 center">

<h2>Share this list</h2>
<span style="font-size:0.8em;">Drag and drop at the bottom box the images you want to share.</span>
<br />
<? if (is_array($available)) : ?>
      <div class="ui-widget ui-helper-clearfix">
            <hr>
            <span style="font-size:0.8em;">available for sharing</span><br />
            <ul id="available-for-share" class="available-for-share ui-helper-reset ui-helper-clearfix  ui-state-default">&nbsp;
                  <? foreach ($available as $k) : ?>
                        <li id="<?= $k['imageID'] ?>" class="ui-widget-content ui-corner-tr">
                              <img src="http://somedomain/images/<?= $k['imageID'] ?>_64.jpg" alt="<?= $k['imageName'] ?>" width="52" height="52" />
                        </li>

                  <? endforeach ?>
            </ul>
            <span style="font-size:0.8em;">shared with</span><br />
            <div id="currently-sharing" class="ui-widget-content ui-state-default ui-droppable">
                  <? if (is_array($currently_sharing_with)) : ?>
                        <ul class="available-for-share ui-helper-reset">
                        <? foreach ($currently_sharing_with as $k) : ?>
                              <li id="<?= $k['imageID'] ?>" class="ui-widget-content ui-corner-tr ui-draggable" style="display: list-item;">
                                    <img src="http://somedomain/images/<?= $k['imageID'] ?>_64.jpg" alt="<?= $k['imageName'] ?>" width="52" height="52" />
                              </li>
                        <? endforeach ?>
                        </ul>
                  <? endif ?>
            </div>

      </div>

<? else : ?>
      <p>No images</p>
<? endif ?>

</div>

The jquery code is inside a <script> and it runs right after the database data have been retrieved.

Answer 1

Found the solution, i had to make $currently_sharing draggable too, it was only droppable.

  // let the $currently_sharing items be draggable
  $( "li", $currently_sharing ).draggable({
        cancel: "a.ui-icon", // clicking an icon won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: $( "#sharing" ).length ? "#sharing" : "document", // stick to demo-frame if present
        helper: "clone",
        cursor: "move"
  });