如何使用jQuery在鼠标悬停时移动iframe

Question

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.

Answer 1

@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;