JavaScriptを色々あれこれしようとするがひたすら失敗を繰り返している
リビジョン | 52 (tree) |
---|---|
日時 | 2016-12-15 01:23:55 |
作者 | ![]() |
(メッセージはありません)
@@ -510,12 +510,19 @@ | ||
510 | 510 | // Drag対象を保持 |
511 | 511 | this.draggingDOM = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target; |
512 | 512 | // ElementのDrag開始位置を保持 |
513 | - this.startElementX = parseInt(this.draggingDOM.style.left); | |
514 | - this.startElementY = parseInt(this.draggingDOM.style.top); | |
513 | + this.startElementX = parseInt(("" == this.draggingDOM.style.left) ? '0' : this.draggingDOM.style.left); | |
514 | + this.startElementY = parseInt(("" == this.draggingDOM.style.top) ? '0' : this.draggingDOM.style.top); | |
515 | 515 | // MouseのDrag開始位置を保持 |
516 | 516 | this.startDragX = evt.pageX; |
517 | 517 | this.startDragY = evt.pageY; |
518 | 518 | this.draggingDOM.style.opacity = 0.4; |
519 | + this.boundRect = this.DOMobject.parentNode.getBoundingClientRect(); // 絶対座標取得 (Scroll量は加味しない) | |
520 | + // position: fixed にすることで overflow: scroll から逃れる | |
521 | + this.DOMobject.style.position = "fixed"; | |
522 | + this.DOMobject.style.left = this.boundRect.left + 'px'; | |
523 | + this.DOMobject.style.top = this.boundRect.top + 'px'; | |
524 | + this.DOMobject.style.width = this.boundRect.width + 'px'; | |
525 | + this.DOMobject.style.height = this.boundRect.height + 'px'; | |
519 | 526 | } |
520 | 527 | |
521 | 528 | // Palette要素移動 |
@@ -533,6 +540,9 @@ | ||
533 | 540 | // dispObjがあった位置からマウス移動分移動させた後の位置取得 |
534 | 541 | moveX = this.startElementX + moveX; |
535 | 542 | moveY = this.startElementY + moveY; |
543 | + // 絶対座標変更分を加算 | |
544 | + moveX = this.boundRect.left + moveX; | |
545 | + moveY = this.boundRect.top + moveY; | |
536 | 546 | |
537 | 547 | window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY)); |
538 | 548 | } |
@@ -554,6 +564,7 @@ | ||
554 | 564 | this.draggingDOM.style.left = this.startElementX + "px"; |
555 | 565 | this.draggingDOM.style.top = this.startElementY + "px"; |
556 | 566 | this.draggingDOM.style.opacity = 1.0; |
567 | + this.DOMobject.style.position = "absolute"; | |
557 | 568 | |
558 | 569 | // Drag中 element情報をクリア |
559 | 570 | this.draggingDOM = null; |
@@ -510,12 +510,19 @@ | ||
510 | 510 | // Drag対象を保持 |
511 | 511 | this.draggingDOM = (null != evt.targetTouches) ? evt.targetTouches[0] : evt.target; |
512 | 512 | // ElementのDrag開始位置を保持 |
513 | - this.startElementX = parseInt(this.draggingDOM.style.left); | |
514 | - this.startElementY = parseInt(this.draggingDOM.style.top); | |
513 | + this.startElementX = parseInt(("" == this.draggingDOM.style.left) ? '0' : this.draggingDOM.style.left); | |
514 | + this.startElementY = parseInt(("" == this.draggingDOM.style.top) ? '0' : this.draggingDOM.style.top); | |
515 | 515 | // MouseのDrag開始位置を保持 |
516 | 516 | this.startDragX = evt.pageX; |
517 | 517 | this.startDragY = evt.pageY; |
518 | 518 | this.draggingDOM.style.opacity = 0.4; |
519 | + this.boundRect = this.DOMobject.parentNode.getBoundingClientRect(); // 絶対座標取得 (Scroll量は加味しない) | |
520 | + // position: fixed にすることで overflow: scroll から逃れる | |
521 | + this.DOMobject.style.position = "fixed"; | |
522 | + this.DOMobject.style.left = this.boundRect.left + 'px'; | |
523 | + this.DOMobject.style.top = this.boundRect.top + 'px'; | |
524 | + this.DOMobject.style.width = this.boundRect.width + 'px'; | |
525 | + this.DOMobject.style.height = this.boundRect.height + 'px'; | |
519 | 526 | } |
520 | 527 | |
521 | 528 | // Palette要素移動 |
@@ -533,6 +540,9 @@ | ||
533 | 540 | // dispObjがあった位置からマウス移動分移動させた後の位置取得 |
534 | 541 | moveX = this.startElementX + moveX; |
535 | 542 | moveY = this.startElementY + moveY; |
543 | + // 絶対座標変更分を加算 | |
544 | + moveX = this.boundRect.left + moveX; | |
545 | + moveY = this.boundRect.top + moveY; | |
536 | 546 | |
537 | 547 | window.renderLoop.requestRenderFunc(this.renderMoveDragging.bind(this, moveX, moveY)); |
538 | 548 | } |
@@ -554,6 +564,7 @@ | ||
554 | 564 | this.draggingDOM.style.left = this.startElementX + "px"; |
555 | 565 | this.draggingDOM.style.top = this.startElementY + "px"; |
556 | 566 | this.draggingDOM.style.opacity = 1.0; |
567 | + this.DOMobject.style.position = "absolute"; | |
557 | 568 | |
558 | 569 | // Drag中 element情報をクリア |
559 | 570 | this.draggingDOM = null; |
@@ -0,0 +1,15 @@ | ||
1 | +HTML 注意事項 | |
2 | +【現象】 | |
3 | +Element A の Mouse Move event 処理中に | |
4 | +Element B の表示が被った場合、 | |
5 | +Mouse Up event は Element B に奪われてしまう | |
6 | + | |
7 | +【対策】 | |
8 | + 1. Mouse Event 処理中は 表示優先度をあげる | |
9 | + 1. 全 Mouse Event を root 近くの Element で一括処理する | |
10 | + 1. Element B で Mouse Event を止めず、 | |
11 | + Element A と B 両方で Mouse Up event 処理をする | |
12 | + | |
13 | + | |
14 | + | |
15 | + |