jQueryUI - dragging element in table issue

Question

I am using jqueryui to create a custom scheduler, but there is an issue with drag/drop events. If I have a drag element which is 2 cells long, it will not trigger the drop event, however if it is odd number, like 3, it WILL trigger it. That is because he chooses the middle droppable element as target, but if it has 2 elements he has no middle element... Does anyone know a workaround, or some other events I can use? Here is an image of what I was trying to achieve:

code for draggable/droppable:

 $(".draggable").draggable({
        containment: '.calendar-cells',
        grid: [47, 27]
    });

    $(".day").droppable({
        drop: function (event, ui) {
            console.log(event);
        }
    });

EDIT: Here is the fiddle: https://jsfiddle.net/k5ovt5gk/3/

Answer 1

最后用 css 解决了它......给每个奇数单元格增加了 .1px 的宽度，以便它可以找到一个中间元素......愚蠢的解决方案，但现在有效