작은 낙하 할

Question

에 드래그 jQuery를 UI 나는이 http://jqueryui.com/demos/droppable/

을 사용하고 있습니다하지만이 문제를 드래그보다 작은 낙하 할에 끌어 있습니다.
droppable에는 드롭되지 않지만 droppable의 왼쪽 위에 나타납니다.

alt text http://yart.com.au/junk/draggableProblem.jpg

이 주변에 어떤 방법이 있나요?

다음은 코드입니다. 감사합니다.

$('.draggable').draggable({ 
    revert: 'invalid', 
    revertDuration: 500, 
    appendTo: 'body', 

    helper: function(event, ui) { 
     return $(this).clone().appendTo('body').css('zIndex', 5).show(); 
    }, 
    drag: function(event, ui) { 
     $(ui.helper).removeClass("enlarge"); 
     $(ui.helper).addClass("thumbnail"); 
     $(this).hide(); 
    }, 
    stop: function(event, ui) { 
     $(this).show(); 
     //$(this).addClass("enlarge"); 
     if ($(this).parent().hasClass("imageContainer")) { 
     $(this).addClass("thumbnail"); 
     } 
     else { 
     $(this).addClass("enlarge"); 
     } 
    }, 
    //cursorAt: { top: 30, left: 40 }, 
    delay: 100, 
    refreshPositions: true 
    }); 


    $('.imageContainer').droppable({ 
    accept: '.draggable', 
    drop: function(event, ui) { 
     ui.draggable.css({ 
     "position": "relative", 
     "left": "0px", 
     "top": "0px" 
     }); 
     if ($(this).children().length == 0) { 
     // ui.draggable.addClass("thumbnail"); 
     $(ui.draggable).appendTo(this); 
     $(this).removeClass("border"); 
     } 
    }, 
    over: function(event, ui) { 
     ui.draggable.removeClass("enlarge"); 
     ui.draggable.addClass("thumbnail"); 
     $(this).addClass("border"); 
    }, 
    out: function(event, ui) { 
     // ui.draggable.removeClass("zoomIn") 
     $(this).removeClass("border"); 
    }, 

    tolerance: 'intersect' 
    }); 

CSS :

.thumbnail { 
    height:60px; 
    margin-right:10px; 
    width:80px; 
    z-index:1; 
} 
.enlarge { 
    border:5px solid white; 
    height:145px; 
    width:195px; 
} 

Answer 1

$('.draggable').draggable({ 
    revert: 'invalid', 
    revertDuration: 500, 
    appendTo: 'body', 

    helper: function(event, ui) { 
     return $(this).clone().appendTo('body').css('zIndex', 5).show(); 
    }, 
    drag: function(event, ui) { 
    /* $(ui.helper).removeClass("enlarge"); 
     $(ui.helper).addClass("thumbnail"); */ 
     $(this).hide(); 
    }, 
    stop: function(event, ui) { 
     $(this).show(); 
     //$(this).addClass("enlarge"); 
     if ($(this).parent().hasClass("imageContainer")) { 
     $(this).addClass("thumbnail"); 
     } 
     else { 
     $(this).addClass("enlarge"); 
     } 
    }, 
    //cursorAt: { top: 30, left: 40 }, 
    delay: 100, 
    refreshPositions: true 
    }); 

위의이 블록에 코드를 교체 시도하고 당신이 원하는 것을 가까이 오면 참조하십시오. 아직 완벽하지는 않지만 한 번에 하나의 변화를 해결할 수 있는지 알아 봅시다. 내가 관찰하기를 바라는 것은 그것이 대략해야하는 것처럼 떨어지는 것입니다.