Make WordPress Core

Opened 10 years ago

Last modified 3 years ago

#25886 new defect (bug)

Sortable items gets stuck when dragging over TinyMCE

Reported by: tollmanz's profile tollmanz Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Editor Keywords: needs-patch
Focuses: javascript, administration Cc:

Description

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:

http://f.cl.ly/items/0j2s0f2f2D3M2e393P3K/Screen%20Shot%202013-11-08%20at%202.33.36%20PM.png

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.

Attachments (1)

25886.patch (1.3 KB) - added by iseulde 10 years ago.

Download all attachments as: .zip

Change History (8)

#1 @ocean90
10 years ago

  • Focuses administration added
  • Keywords dev-feedback added

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?

#2 @iseulde
10 years ago

  • Component changed from TinyMCE to Editor
  • Keywords dev-feedback removed

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
10 years ago

#3 @iseulde
10 years ago

  • Keywords has-patch added

Something like that should fix it.

#4 @iseulde
10 years ago

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

#5 @iseulde
9 years ago

  • Focuses javascript added

#6 @andraganescu
5 years ago

  • Keywords needs-refresh added

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.

#7 @noisysocks
3 years ago

  • Keywords needs-patch added; has-patch needs-refresh removed
Note: See TracTickets for help on using tickets.