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 就可以了：

.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 回答