jQuery UI sortable with body zoom not working, Not calculating drag and drop area correctly.

In one of my project, I am trying to jQuery UI sortable work with zoom CSS property on body. But it’s not allowing me to drag and drop correctly on the right position.

Drag only working with half area, if user try to drag and drop from empty area on right side (Black area in my case) it’s not working

Red area where drop not working

Possible Causes

The behavior of jQuery UI  sortable is comparing the mouse position with the element offsets. However, It seems that offset values of children elements won’t be affected by  zoom if setting  zoom on a parent element. (Safari CSS Reference has mentioned it slightly.)

By the way, according to Mozilla document of zoom, CSS  zoom is non-standard. It means it has possibility of different behaviors in variable browsers. If it’s possible, try not to use CSS  zoom.

Now What solution I have used

With JS : Calculate new let and top points :

Solution With CSS only : Resetting CSS Zoom and again applying on target selector.

Solution: nested zooming

In your case, it works well to get the width after zooming if  zoom set on <td>. So I try to set nested  zoom to simulate the view of setting  zoom on <body>:

If you do above, you don’t have to calculate  helper the element by yourself:


About Vijay Dhanvai

A passionate blogger by heart and mind, I have been working in this field for 10 years now. A WordPress Professional, web developer and designer who intends to guide his readers about Web Design, WordPress, Blogging, Web Development, and more.

Leave a Reply