teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問jqueryのonメソッドのdragoverイベントが動かない

編集履歴

質問編集履歴

2

質問の修正

2021/02/12 05:33

投稿

kuuhaku4262
kuuhaku4262

スコア39

test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,9 @@
4
4
 
5
5
  画面上でタグをドラッグ&ドロップできる画面を作成しています。
6
6
 
7
- しかし、onメソッドのdragoverイベントが動かないため、うまくドラッグ&ドロップが出来ません。
7
+ knockout.jsでHTMLをループさせると、ドラッグ&ドロップが出来ません。
8
-
8
+
9
- どこに問題があるのでしょうか？
9
+ どのようにして解決すればいいのでしょうか？
10
10
 
11
11
 
12
12
 

1

ソースコードの修正

2021/02/12 05:33

投稿

kuuhaku4262
kuuhaku4262

スコア39

test CHANGED
File without changes
test CHANGED
@@ -28,40 +28,48 @@
28
28
 
29
29
  echo $this->Html->script('drag_and_drop.js',[ 'inline' => false ]);
30
30
 
31
- echo $this->Html->script('movable-window.js',[ 'inline' => false ]);
32
-
33
31
 
34
32
 
35
33
  ?>
36
34
 
37
35
 
38
36
 
37
+ <div>
38
+
39
- <div class="placement">
39
+ <div class="placement">
40
-
40
+
41
- <table style="border: 1px solid; width: 10rem">
41
+ <table style="border: 1px solid; width: 10rem">
42
+
42
-
43
+ <!-- ko foreach: carData -->
44
+
45
+ <tbody>
46
+
43
- <tr style="height: 3rem;">
47
+ <tr style="height: 3rem;">
44
-
48
+
45
- <td class="driver_column droppable-place" style="border: 1px solid;"></td>
49
+ <td class="driver_column droppable-place" style="border: 1px solid;"></td>
46
-
50
+
47
- </tr>
51
+ </tr>
52
+
48
-
53
+ </tbody>
54
+
55
+ <!-- /ko -->
56
+
49
- </table>
57
+ </table>
50
-
58
+
51
- <table style="width: 10rem">
59
+ <table class="outer_frame" style="width: 3rem">
52
-
60
+
53
- <tr>
61
+ <tr>
54
-
62
+
55
- <td class="draggable-item item" data-dandd-group="driver">佐藤<br><input class="item_input"></td>
63
+ <td class="draggable-item item" data-dandd-group="driver">佐藤<br><input class="item_input"></td>
56
-
64
+
57
- </tr>
65
+ </tr>
58
-
66
+
59
- </table>
67
+ </table>
68
+
69
+ </div>
60
70
 
61
71
  </div>
62
72
 
63
-
64
-
65
73
  ```
66
74
 
67
75
  ###drag_and_drop.js
@@ -366,150 +374,76 @@
366
374
 
367
375
  ```
368
376
 
369
- ###movable-window.js
370
-
371
- ```javascript
372
-
373
- function initializeMovableWindow(windowSelector, pinchableSelector) {
374
-
375
- // 移動中のタグ
376
-
377
- let movingTag = undefined;
378
-
379
-
380
-
381
- // 移動時のマウス位置(相対)
382
-
383
- let mouseX = 0;
384
-
385
- let mouseY = 0;
386
-
387
-
388
-
389
- // マウスボタンを押したときのイベント
390
-
391
- function mouseDown(event) {
392
-
393
- // クリック位置を記録
394
-
395
- mouseX = event.pageX - this.offsetLeft;;
396
-
397
- mouseY = event.pageY - this.offsetTop;
398
-
399
-
400
-
401
- // ドラッグ対象タグを記録
402
-
403
- movingTag = this;
404
-
405
- }
406
-
407
-
408
-
409
- // マウス移動中イベント
410
-
411
- function mouseMove(event) {
412
-
413
- // ドラッグ中以外は処理しない
414
-
415
- if (movingTag === undefined) {
416
-
417
- return;
418
-
419
- }
420
-
421
-
422
-
423
- // ドラッグ対象タグの位置を移動
424
-
425
- movingTag.style.top = event.pageY - mouseY + "px";
426
-
427
- movingTag.style.left = event.pageX - mouseX + "px";
428
-
429
- }
430
-
431
-
432
-
433
- // マウスボタンを押してから上げたイベント
434
-
435
- function mouseUp() {
436
-
437
- // ドラッグ対象を解除
438
-
439
- movingTag = undefined;
440
-
441
- }
442
-
443
-
444
-
445
- // マウス移動は、画面全体で実行する。
446
-
447
- $(document)
448
-
449
- .on('mousemove', mouseMove)
450
-
451
-
452
-
453
- $(windowSelector)
454
-
455
- //.on('dragstart', function() { return false; }) // 標準のD&Dは使用しない。
456
-
457
- .on('mousedown', mouseDown)
458
-
459
- .on('mouseup', mouseUp);
460
-
461
-
462
-
463
- // 子要素でドラッグ関連のイベントが発生しないように変更
464
-
465
- $(windowSelector)
466
-
467
- .children(':not('+pinchableSelector+')') // 設定対象をドラッグ可能なタグ以外にする。
468
-
469
- .on('mousedown', function(event) {
470
-
471
- event.stopPropagation();
472
-
473
- })
474
-
475
- .on('mousemove', function(event) {
476
-
477
- event.stopPropagation();
478
-
479
- })
480
-
481
- .on('mouseup', function(event) {
482
-
483
- event.stopPropagation();
484
-
485
- });
377
+ ###VehicleDispatchSchedule.js
378
+
379
+ '''javascript
380
+
381
+ $(function() {
382
+
383
+
384
+
385
+ let vehicledispatchscheduleModel = function(){
386
+
387
+ let self = this;
388
+
389
+
390
+
391
+ self.carData = [a, b, c, d, e]
392
+
393
+
394
+
395
+ initializeDragAndDrop({
396
+
397
+ draggableSelector: '.draggable-item',
398
+
399
+ droppableSelector: '.droppable-place',
400
+
401
+ dragOverClass: 'drop-place-focus',
402
+
403
+ groupData: 'dandd-group',
404
+
405
+ },);
406
+
407
+ }
408
+
409
+
410
+
411
+ ko.applyBindings(new vehicledispatchscheduleModel());
412
+
413
+ });
414
+
415
+ '''
416
+
417
+ ###vehicle_dispatch_schedule.css
418
+
419
+ ```css
420
+
421
+ .placement{
422
+
423
+ display: flex;
424
+
425
+ flex-direction: row;
486
426
 
487
427
  }
488
428
 
429
+ .driver_column{
430
+
431
+ width: 16%;
432
+
433
+ text-align: center;
434
+
435
+ font-size: 96%;
436
+
437
+ }
438
+
439
+ .outer_frame{
440
+
441
+ border: solid 1.5px;
442
+
443
+ }
444
+
489
445
  ```
490
446
 
491
- ###VehicleDispatchSchedule.js
492
-
493
- ```javascript
494
-
495
- $(function() {
496
-
497
- initializeDragAndDrop({
498
-
499
- draggableSelector: '.draggable-item',
500
-
501
- droppableSelector: '.droppable-place',
502
-
503
- dragOverClass: 'drop-place-focus',
504
-
505
- groupData: 'dandd-group',
506
-
507
- },);
508
-
509
- }
510
-
511
- ```
512
-
513
447
 
514
448
 
515
449
  ### 補足情報（FW/ツールのバージョンなど）