[FIXED] how to move iframe on mouse over using jquery

Issue

I am attempting to move an iframe on mouseover in jQuery. I have had some success with this by capturing the mouse position within the iframe, but the flicker off the movement is extreme.

Here is a jsfiddle example

As far as I can see, the reason for the flicker is that every time the iframe moves the x position inside the iframe jumps in the opposite direction, but I can not figure a way of fixing it.

Solution

@charlietf,

Thanks for your efforts, it did indeed lead me in the right direction and I have given a vote to your comment.

The only problem with your example is that as the iframe x position changed the e.pageX changes with it. This means it always equals 0 (or close to).

To get past this I had to add a variable that captures the mouse position within the iframe before any movement has taken place and then remove this number from the x variable when moving the frame.

For anyone out there looking for something similar, here is an update version of charlietf's script with the changes written in. I have also changed from mouseover mouseout events to mousedown mouseup in order to make it easier to play with.

Now I can drag an iframe around from any non active part of my iframe;

Answered By - Finglish

Answer Checked By - Mary Flores (PHPFixing Volunteer)