光標在拖動時變回工字光束

我的代碼如下。我也有它在http://jsfiddle.net/S2JHa/光標在拖動時變回工字光束

我不明白爲什麼光標變成工字母，當我點擊並拖動鼠標在我的圖片上。

如果我刪除「一些文本」，那麼它不會改變。這發生在Chrome中。 FF很好。

請如果你能告訴如何解決，我將不勝感激。謝謝！

<div id="window"> 
    <div>some text</div> 
    <div id="sketch" class="box"> 
    <div class="contents"> 
     <canvas id="image-layer"></canvas> 
    </div> 
    </div> 
</div>

CSS：

#window #sketch 
{ 
    padding: 1cm 0; 
} 
#window #sketch canvas 
{ 
    left: 0; 
    position: absolute; 
    top: 0; 
} 
#window #sketch .contents 
{ 
    cursor: crosshair; 
    position: relative; 
} 
div.box 
{ 
    background-color: #fff; 
    border: 1px solid black; 
    border-radius: 0.3cm; 
    cursor: move; 
    left: 0; 
    position: fixed; 
    top: 0; 
}

的JavaScript：

function image_onload(e) { 
    var image = e.target; 

    $("div.box").draggable({ 
     cancel: "div.box div.contents", 
     containment: "document" 
    }); 

    var x = $("#window #sketch"); 

    // size to fit image 
    x.css("width", image.width); 
    x.css("height", image.height); 

    // center sketch inside parent window 
    x.css("left", ($(window).width() - x.width())/2); 

    var canvas = document.getElementById("image-layer"); 

    canvas.height = image.height; 
    canvas.width = image.width; 

    var context = canvas.getContext("2d"); 
    context.drawImage(image, 0, 0); 
} 

function open(url) { 
    var image = new Image(); 

    image.src = url; 
    image.onload = image_onload; 
} 

open("http://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png");

來源

2012-04-17 akonsu

如果你不想與畫布的交互可以取消onmousedown事件事件像這樣：

canvas.onmousedown = function() { 
    return false; 
}

您需要：IE：

canvas.onselectstart = function() { 
    return false; 
}

見更新的jsfiddle這裏：http://jsfiddle.net/S2JHa/11/

來源

2012-04-17 04:00:31

光標在拖動時變回工字光束

回答

相關問題