0

このスニペットでは、Konvas キャンバスの周りに緑色の四角形をドラッグすると、すべてうまくいきます。ただし、ドラッグを続けてマウスをトップバーの上に移動すると、たとえば、緑色の四角形がマウスポインターの下に「ジャンプ」します。

私は何か間違ったことをしていますか？

ドラッグ コードが、ページではなくポインターの「下」にある要素に関連する mousemove イベント パラメーターを使用しているように感じます。event.pageX & Y ではなく、event.clientX & Y のように。

編集:キャンバス上に絶対配置された灰色のdivを追加しました-マウスが灰色のボックスの上を通過するように、緑色の四角形をキャンバス上にドラッグしてみてください。びくびくびくびくびくびく。

// add a stage
var s = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 400
});

// add a layer        
var l = new Konva.Layer();
s.add(l);

// Add a green rect to the LAYER
var green = new Konva.Rect({stroke: 'lime', width:100, height: 100, draggable: true, x: 20, y: 20});
l.add(green);

l.draw()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.2/konva.min.js"></script>


<body>
  <div id="top"  style='width: 600px; height: 50px; border: 1px solid #ccc;'><span>Top bar</span>
  <span> Pos: </span><span id='pos'> Drag the green rect, watch it jump when mouse moves over this bar.</span>
  </div>

  <div id="container"  style='width: 600px; height: 500px; border: 1px solid #ccc;'></div>

  <div id="blob"  style='width: 40px; height: 40px; border: 1px solid #ccc; background-color: #ccc; position: absolute; left: 250px; top: 80px;'></div>


</body>

4

1 に答える 1