Draggable element in VML get stuck when size chang

问题:

I'm having issue with VML (wich I use as fallback for svg)

I use jQuery UI draggable to let user be able to move an element around. The problem occurs when I resize the image (wich is a v:image) by changing the style attribute of height and width.

What happen at this point is that the element get stuck at the left top corner of it's container and cannot be dragged anymore.

A strange thing is that when I ask for the position (top, left) of the draggable element in the javascript console, I get value, and those values change when I click and drag - even though the element isn't visually moving...

Anyone run into this problem before ?

Here's where I change then size of my element.

$($image)
    .css({
        'width' : zoomInPx_width + "px",
        'height' : zoomInPx_height + "px"
    });

The draggable is set pretty straight foward

$($image).draggable({
    drag: function () { /*callback here*/ }
})

Thanks !

回答1:

Finaly I manage to make this work.

Seems that VML crash on IE 8 when we change size of a draggable element. So, I had to destroy the element and recreate it from scratch when sliding occurs...

That's not really performant, but that's the only fix to work for me up here.

By the way, .detach() didn't work, you have to destroy it and recreate it from scratch.

You can get some info there too: http://www.acumen-corp.com/Blog/tabid/298/EntryId/26/Using-jqueryRotate-ui-draggable-and-resizable-images-in-IE7-IE8-and-any-other-browser.aspx

回答2:

on my application I used this code:

var $cloned_image = $($image).clone().get(0);
$($image).remove();

// need add draggable again
$($cloned_image).draggable();

document.getElementById('k').appendChild($cloned_image);
$image = $cloned_image;