jQuery UI 요소에서 반복 드래그가 실패했습니다.

Question

복잡한 장바구니를위한 간단한 드래그 앤 드롭 기반을 마련하려고합니다. jQuery UI를 사용한 적이 없기 전에 내가 전에했던 프로토 타입을 조합 해 본 결과 주 개념이 입증되었습니다.

간단히 말해 카트에는 여러 개의 드래그 가능한 애셋이 포함될 수있는 여러 컨테이너가 있습니다. Divs 내의 div뿐입니다. 자산은 컨테이너에 떨어 뜨려야합니다. 초기 상호 작용이 작동하지만 일단 다른 컨테이너에 자산을 떨어 뜨린 다음 동일한 애셋을 다시 또는 다른 컨테이너로 드래그하면 드롭이 작동하더라도 드래그가 커서를 따라 가지 않습니다. Heres는 http://jsfiddle.net/VjWx2/

내 자바 스크립트 :

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