放置在表格单元格的边框上时未触发放置事件

Question

I am using jQuery UI draggable plugin to drag divs into a table.

My problem is that sometimes when dragging into a table cell I experience that the drop event is not triggered. It seems to happen when dropped exactly on the one pixel that separates two cells (vertical or horizontal). I've tried to set the border to 0 but still I have the problem.

Check out this simplified example .

Answer 1

Working demo http://jsfiddle.net/YNUzx/1/ or http://jsfiddle.net/YNUzx/2/

Tolerance option should be set to touch for better drag functionality :)

or use pointer as tolerance: mouse pointer overlaps the droppable

Good read: http://jqueryui.com/demos/droppable/#option-tolerance

Behaviour : Now when you will drag say "1" to the table cell a touch will trigger the drop in the table, rest you can see that in demo.

Hope this helps,

Following line does the trick: tolerance: "touch",

code

$(".dragbox").draggable({
    revert: true
});

$("table tr td").droppable({
    accept: ".dragbox",
    tolerance: "touch",
    drop: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        }).html(ui.draggable.find('span').text());
    },
    over: function(event, ui) {
        $(this).css({
            'background-color': '#DCFFDB'
        });
    },
    out: function(event, ui) {
        $(this).css({
            'background-color': 'white'
        });
    }
});​

Answer 2

What I suggest is use the 'touch' tolerance option but remove the margin of the draggables, since they are creating problem for the proper functionality. Instead use a wrapper div for the draggables and give that div some margin. This might help http://jsfiddle.net/YNUzx/3/

Also I would recommend that you increase the width and height of td to see the proper working.

EDIT: try this http://jsfiddle.net/YNUzx/4/ I think I got the solution

Answer 3

Thanks to a comment by Tejasva Dhyani and chat with Tats_innit I found the answer:

jQuery gets confused (and rightfully so) when dropping while the draggable div is just between two droppable elements (cells).

Ie if dropping while 15px is over one cell and 15px is over another the drop event is not triggered.

All I did was to set the width and height to an uneven number, see jsfiddle here :