3

jQuery UI を使用して頂点を取得し、それらを移動して、キャンバスで編集可能な素敵なポリゴンを作成しようとしています。これは、Chrome、Firefox、および Safari では正常に機能していますが、IE9 ではまったく機能しません。

http://jsfiddle.net/EveryoneMustWin/qNdCw/

CSS

.vertex {width:50px; height:50px; border:0px dotted red; position:absolute; display:none; z-index:0;}

#vertexcontainer .vertex {display:block;}

.vertex div.handle {width:40px; height:40px; position:relative; left:-20px; top:-20px; border:1px solid red; border-radius:20px;z-index:1; opacity:0.5;}

.currenthandle {width:40px; height:40px; border:1px solid red; position:absolute; background-color:#fc0;}

コード

$( ".vertex" ).draggable({
    stack: "div",
    snap: true,
    handle: "div.handle",
    start: function() {
        $(".currenthandle").removeClass("currenthandle");
        $(this).children("div.handle").addClass("currenthandle");
    },
    drag: function() {
        drawPoly();
    },
    stop: function() {
        drawPoly();
    }
});

頂点ハンドルのドラッグ可能な領域は非常に小さいようです。運が良ければ、ハンドルの境界の周りをクリックして選択できます。頂点を選択したら、それらをうまくドラッグすることができるため、コアのドラッグ可能な動作には問題ありません。

私の推測では、jQuery UI が「.vertex div.handle」の element.style を不適切な設定に設定していると思われます。それとも、CSS3 の IE9 の問題ですか? 私は要素インスペクターを使わずに IE でこの種の問題を調査するのはあまり得意ではありません。ヒントをありがとう！

4

1 に答える 1

1

AFAICT の問題は、IE がクリック可能な「コンテンツ」を持たない要素部分でのマウス クリックを無視することです。この場合、定義済みbackground-colorの魔法のように IE is ok を追加できます。

.vertex div.handle {
    width:40px; 
    height:40px; 
    position:relative; 
    left:-20px; 
    top:-20px; 
    border:5px solid red; 
    border-radius:20px;
    z-index:1; 
    opacity:0.5; 
    background-color: #ddd;
}

http://jsfiddle.net/qNdCw/6/

背景の不透明度が気に入らない場合は、背景に透明な画像を設定して「だます」ことができると思います。

于 2012-10-19T15:34:30.163 に答える