Repeat dragging on a jQuery UI element is failing

Question

I'm trying to get a simple drag and drop foundation in place for quite a complicated shopping cart. Having never used the jQuery UI before I've put together a prototype that I just did that demonstrates the main concept.

In short the cart has several containers which may contain any number of draggable assets. It's just divs within divs. The assets should be allowed to be dropped in any container. I've got the initial interaction working but once I've dropped an asset in another container and I try and drag the same asset back or to another container the dragging doesn't follow the cursor, although the drop does work.

I've posted the code here: http://jsfiddle.net/VjWx2/

Heres my JavaScript:

var cartDragger, move;

cartDragger = (function() {

  function cartDragger(el, contain) {
    this.el = el;
    this.contain = contain;
  }

  cartDragger.prototype.drag = function() {
    return $(this.el).draggable({
      revert: 'invalid',
      start: function() {
        this.currentParent = $(this).parent().attr('id');
        return $(this).addClass('highlighted');
      }
    });
  };

  cartDragger.prototype.drop = function() {
    return $(this.contain).droppable({
      accept: this.el,
      over: function() {
        return $(this).removeClass('out').addClass('over');
      },
      out: function() {
        return $(this).removeClass('over').addClass('out');
      },
      drop: function(event, ui) {
        $(this).removeClass('over');
        ui.draggable.removeClass('highlighted');
        if (this.currentParent !== $(this).attr('id')) {
          return ui.draggable.appendTo($(this)).removeAttr('style');
        }
      }
    });
  };

  return cartDragger;

})();

move = new cartDragger('.asset', '.project');
move.drag();
move.drop();

Answer 1

I don't know why the helper is not present after some moves, but you could use a workaround creating a clone helper like this : http://jsfiddle.net/VjWx2/1/

  cartDragger.prototype.drag = function() {
    return $(this.el).draggable({
      revert: 'invalid',
      helper:function() {
        return $(this).clone();
      },
      opacity : '0.6',
      start: function() {
        this.currentParent = $(this).parent().attr('id');
        return $(this).addClass('highlighted');
      }
    });
  };