拖动时光标变回 I 形

cursor changes back to I-beam when dragging

本文关键字：时光 光标 拖动      更新时间：2023-09-26

我的代码在下面。我也有 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");

如果您不想与画布交互，则可以取消 onmousedown 事件，如下所示：

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

Fr IE 您将需要：

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

在此处查看更新的 jsfiddle：http://jsfiddle.net/S2JHa/11/

相关文章：