重複在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'); 
     } 
    }); 
    };