JQuery user interface drag and drop to smaller size

Question

I am using this http://jqueryui.com/demos/droppable/

But I have a problem with dragging and dropping onto a towed device that is smaller than draggable.
It will not fall on the discard item, but in the upper left corner of the item.

_{(source: yart.com.au )}

Is there any way around this?

Here is the code, thanks.

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

Try replacing your code with this block above and see if it comes close to what you want. It may not be perfect yet, but let's see if we can solve one change at a time. What I hope to observe is that it falls about the way it should.