Sortable items gets stuck when dragging over TinyMCE

[tollmanz]

When dragging a metabox over an active TinyMCE instance in a post/page edit screen, the metabox can get "stuck" (i.e., it stopping moving with the mouse). This only happens with TinyMCE and not the "Text" textarea.

To reproduce:

1. Uninstall plugins
2. Install a default theme (I used Twenty Thirteen)
3. Go to Pages > Add New
4. If it is not activated already, click the "Visual" tab to activate the TinyMCE instance
5. Grab the featured image metabox to activate the sortable (i.e., drag and drop) functionality
6. Move the box over the TinyMCE area
7. Continual movement over the area will cause it to get stuck

The following screen grab shows how the cursor separates from the metabox as it gets stuck:

It's kinda hard to understand it with that image, so here's a movie that shows the issue:

​http://f.cl.ly/items/1B151E3N0i3j092Z062m/broken-drag-and-drop.mov

I have tested this in Safari, Firefox, and Chrome on OS X. All browsers produce the same issue. The issue persists with MP6 as well.

[ocean90]

Thanks for the report tollmanz. I could reproduce this in current trunk and Chrome 33.

Is it possible to disable TinyMCE while dragging a metabox, azaozz?

[iseulde]

This is not really a TinyMCE issue... This is an *iframe* issue. The parent can't capture the mouse position when it's inside an iframe. You'll notice that this only happens when you move quite fast and the mouse goes over the postbox (i.e. the mouse moves faster than jQuery can update the postbox coordinates). The only way to solve this is to overlay the iframe temporarily with a div, or :after, so that the iframe doesn't capture the mouse position.

[iseulde]

Something like that should fix it.

[iseulde]

There's also an option iframeFix for draggable, but that doesn't work for sortable. They append a div to the body and then set the positions with js. That's an alternate approach.

​https://github.com/jquery/jquery-ui/blob/master/ui/draggable.js#L123

[andraganescu]

Hi there,

This problem shows up if one drags the box fast enough and the pointer turns into a text cursor b/c it hovers the text in TinyMCE. The patch doesn't solve this from my testing and dragging fast enough still gets the box stuck.