Agregar dinamicamente un contenedor droppable y sorteable

Hola, estoy trabajando con drag, drop y sort de Jquery UI, el problema que tengo es que al crear un contenedor droppeable, no funciona el drop y aun menos el sort.

La idea es que cada elemento agregado a un contenedor sea sorteable solo dentro de el. dejo el código:

Código HTML :

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <button type="button" class="btn btn-default add-container">Add Drop container</button>
    </br>
      <ul class="list-unstyled" id="draggable">
        <li>
          <div class="row">
            <div class="col-xs-6 col-md-4">
              <img name="SELECT" src="http://s13.postimg.org/j0qxzty7n/select.png"/>
            </div>
            <div class="col-xs-6 col-md-4 options"></div>
          </div>
        </li>
        <li>
          <div class="row">
            <div class="col-xs-6 col-md-4">
              <img name="INPUT" src="http://s30.postimg.org/x7f311jv1/input.png" />
            </div>
            <div class="col-xs-6 col-md-4 options"></div>
          </div>
        </li>
        <li>
          <div class="row">
            <div class="col-xs-6 col-md-4">
              <img name="DATE" src="http://s24.postimg.org/cylp3nzkx/date.png"/>
            </div>
            <div class="col-xs-6 col-md-4 options"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="col-md-6 containers">
      Drop container
      <ul class="sortable"></ul>
    </div>
  </div>
</div>

Código Javascript :

      $(function() {

          $(':button.add-container').on('click', function(event){
              var ul = $('<ul></ul>');
              var container = $('div.containers');
              $(container).append(ul.attr('class', 'sortable'));
          });

          $( "#draggable li" ).draggable({
              connectToSortable: ".sortable",
              helper: "clone",
              revert: "invalid"
          }).disableSelection();

          $( ".sortable" ).sortable({
              revert: true
          }).disableSelection();
      });

Código CSS :

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.container{
   margin-top: 20px;
}

.sortable {
    border: 1px solid black;
    min-width: 100px;
    min-height: 100px;
    list-style: none
}

.sortable li {
   padding: 5px;
}

#draggable li {
    padding-top: 10px;
    padding-bottom: 5px;
}

Espero sus comentarios, saludos.

Cuando ejecutas el código para que un contenedor tenga asociado un evento es solo para los elementos actuales del dom, por lo cual los elementos agregados posteriormente no tendrán asociado el evento, para esto debes volver a ejecutar el código con el que agregas el evento.

el evento "on" te permitirá leer los cambios. de los objetos que se agreguen dinamicamente.

$(".tudiv").on("tulanzandor", function(){ /* aqui el code del droppable y eso */ });

Muchas gracias por sus respuestas, lo solucione de la siguiente forma, jsfiddle, voy a leer mas sobre el evento "on", saludos.