重复在jQuery UI元素上拖动失败

Question

我试图在相当复杂的购物车中找到简单的拖放基础。在我整理了一个我刚刚做的原型之前，从未使用过jQuery UI，这说明了主要概念。

总之，购物车有几个容器可能包含任何数量的可拖动资产。这只是divs内的div。资产应该被允许放入任何容器中。我有最初的交互工作，但是一旦我将资产放到另一个容器中，并尝试将相同的资产拖回或拖放到另一个容器，拖动不会跟随光标，尽管拖放仍然有效。

我已经张贴在这里的代码：http://jsfiddle.net/VjWx2/

继承人我的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

我不知道为什么助手是不是有些动作后存在的，但你可以使用一种变通方法创建这样的克隆帮手：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'); 
     } 
    }); 
    };