0

I want to use a custom helper in a web application I'm working on for displaying some text about the highlighted item, in this case a 'friendly' name. I've chosen JQuery UI as my plugin. Unfortunately, I need to support users on IE7 and that's not negotiable. The demo on Jquery's web-site works as expected in IE7:

$( "#draggable3" ).draggable({
cursor: "move",
cursorAt: { top: -12, left: -20 },
helper: function( event ) {
return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
}
});

However, when I copy this and place it in my own web-site it doesn't work in IE7 but works in FireFox, Chrome, and Opera. By not work I mean that the cursor changes correctly and the 'draggable' state is active but the helper text isn't displayed.

To fix it I've tried using 'zoom:1;', 'z-index:9999;' but also 'position:relative;' and 'position:absolute;', which leaves me wondering 'Have I missed something?' Hopefully someone else has encountered this problem and can shed some light on it for us all.

4

1 に答える 1

0

それでもこの問題が発生するかどうかはわかりませんが、この1行を追加してください。

$( "#draggable3" ).draggable({
    appendTo: 'body',
    cursor: "move",
    cursorAt: { top: -12, left: -20 },
    helper: function( event ) {
        return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
    }
});

ヘルパーdivがどこか奇妙な場所に追加されています。私はテーブルの一番下にあり、テーブルの境界線をジャッキアップしていたためにしか見ることができませんでした。

于 2013-02-23T11:31:08.030 に答える