Question

我一直在尝试在画布中创建一个漂亮的可编辑多边形，使用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中调查这些问题。感谢您的任何提示！

Answer 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/

如果您不喜欢背景上的不透明度，我认为您可以使用设置为背景的透明图像来“欺骗”它。

IE9中的jQuery UI可拖动句柄非常小

1 个答案: