Sortable with an iframe breaks in Firefox but not other browsers
The attached zip file is a working drag and drop demo that uses sortable and connected lists to allow boxes to be dragged around on the page. My <ul> lists contain <li> items. Within the <li> items are <div> items. In one case, within the <div> is an <iframe> that holds a picture.
There is odd behavior, for Firefox only, when you drag a different box/div across the box/div that contains the <iframe>. I'm using a handle for clicking and dragging a box. The problem is this: while dragging within the <iframe>, the mouse pointer can become disassociated with the handle.
In my REAL application, which is too complex to post here, the disassociation is very obvious and occurs during natural movement. However, with this demo page, you have to try a little harder with your mouse in order to see the problem. Here are the steps you have to take:
1. Unzip the attached file to any folder on your PC.
2. Open TestDragAndDropPhase11.html in Firefox.
3. Put your mouse over Box 4.
4. When the "4-arrowed move icon" appears, click it and begin dragging.
5. Drag Box 4 over the large picture above it. Don't let go of the mouse yet.
6. Here's the tricky part: with Box 4 over the lower 1/3 or 1/2 of the large picture, very quickly move your mouse into the top upper 1/2 or 1/3 of the large picture. Don't let go of the mouse. The mouse pointer will become "disconnected" with Box 4. (You may have to try this a few times.)
Interestingly, while still holding the mouse, if you move it back on top of Box 4 you can reconnect with Box 4 and resume moving it around.
This problem doesn't occur on IE, Safari, Opera, or Chrome.
Does anybody know how to fix this? Thanks in advance.
P.S. EASIER WAY TO DUPLICATE PROBLEM: In Step 6, drag Box 4 around to the outside right of the big picture. Then drag Box 4 into the picture <iframe>. You'll notice the problem as you drag your mouse leftward over the <iframe>. Drag Box 4 to the right of the picture <iframe> to start over. Then drag it back over the picture again. (I noticed the same thing happens if you drag Box 4 from below the picture <iframe> instead of from the right of the picture <iframe>.)
P.S. #2: If the <iframe> tag is replaced with the following <img> tag, then the "disconnect" problem no longer happens:
<img src="./images/Steve_Tanner.jpg"/>
Unfortunately, I can't do that in my REAL app. But this does show that there is an issue with the <iframe>.