
起きている問題
ajax処理時、重複されて実行されてしまいます。
js
1 $.ajax({ 2 type: 'POST', 3 url: '../ajax_edit_memo.php', 4 dataType: 'text', 5 data: { 6 group_id: group_id, 7 memo_group_id: memo_group_id, 8 memo_group_list: memo_group_list 9 } 10 }).done(function() { console.log("test"); }).
このように一回のクリックで重複されて処理されます。
実施したこと
js
1 var jqxhr; //追記 2 $('.memo').on('mouseup', function() { 3 var ball_target = $(this).data("target"), 4 ball = document.querySelector(ball_target), 5 memo_group_id = ball.id.slice(9) + " ", 6 group_id = currentDroppable_memogroup.id.slice(15), 7 memo_group_list = 1; 8 if (jqxhr) { //追記 9 return; //追記 10 } //追記 11 jqxhr = //追記 12 $.ajax({ 13 type: 'POST', 14 url: '../ajax_edit_memo.php', 15 dataType: 'text', 16 data: { 17 group_id: group_id, 18 memo_group_id: memo_group_id, 19 memo_group_list: memo_group_list 20 } 21 }).done(function() { console.log("test"); }).fail(function() {}); 22 });
jqxhr
を追記しましたが、結果は同じでした。
コード
js
1var ball = document.querySelector('.memo'); 2 3$(document).on('dblclick', '.memo', function(event) { 4 let ball_id = $(this).data("target"); 5 let ball = document.querySelector(ball_id); 6 let currentDroppable_memogroup = null; 7 let shiftX = event.clientX - ball.getBoundingClientRect().left; 8 let shiftY = event.clientY - ball.getBoundingClientRect().top; 9 10 //絶対位置で一番上になるように 11 ball.style.position = 'absolute'; 12 ball.style.zIndex = 1000; 13 14 //対象オブジェクトをbody要素に追加 15 document.body.append(ball); 16 17 moveAt(event.pageX, event.pageY); 18 19 function moveAt(pageX, pageY) { 20 ball.style.left = pageX - shiftX + 'px'; 21 ball.style.top = pageY - shiftY + 'px'; 22 } 23 24 function onMouseMove(event) { 25 moveAt(event.pageX, event.pageY); 26 27 ball.hidden = true; 28 let elemBelow = document.elementFromPoint(event.clientX, event.clientY); 29 ball.hidden = false; 30 31 let droppableBelow_memogroup = elemBelow.closest('.memo_area'); 32 if (currentDroppable_memogroup != droppableBelow_memogroup) { 33 if (currentDroppable_memogroup) { // null when we were not over a droppable before this event 34 leaveDroppable(currentDroppable_memogroup, ball); 35 } 36 } 37 38 currentDroppable_memogroup = droppableBelow_memogroup; 39 if (currentDroppable_memogroup) { 40 var jqxhr; 41 $('.memo').on('mouseup', function() { 42 var ball_target = $(this).data("target"), 43 ball = document.querySelector(ball_target), 44 memo_group_id = ball.id.slice(9) + " ", 45 group_id = currentDroppable_memogroup.id.slice(15), 46 memo_group_list = 1; 47 if (jqxhr) { 48 return; 49 } 50 jqxhr = 51 $.ajax({ 52 type: 'POST', 53 url: '../ajax_edit_memo.php', 54 dataType: 'text', 55 data: { 56 group_id: group_id, 57 memo_group_id: memo_group_id, 58 memo_group_list: memo_group_list 59 } 60 }).done(function() { console.log("test"); }).fail(function() {}); 61 }); 62 } 63 } 64 65 document.addEventListener('mousemove', onMouseMove); 66 67 ball.onmouseup = function() { 68 document.removeEventListener('mousemove', onMouseMove); 69 ball.onmouseup = null; 70 }; 71});
php
1 <div class="memo_area" style="background-color: gray;width: 10%;height: 10%;padding:50px;margin:50px;"></div> 2 </div> 3 foreach ($block[$_SESSION[$n]] as $memo) : 4 $memo_user = $user->get_user($memo['user_id']); 5?> 6<div class="memo" id="memo_list<?= $memo['id'] ?>" data-target="#memo_list<?= $memo['id'] ?>" data-toggle="memo_list"> 7 8 <div class="memo_list memo_list<?= $memo['id'] ?>"> 9 <div class="memo_text ellipsis" id="memo<?= $memo['id'] ?>"><?= $memo['text'] ?></div> 10 <input type="hidden" value="<?= $memo['id'] ?>"> 11 <?php 12 if (!empty($memo['image'])) : 13 print '<img src="/memo/image/' . $memo['image'] . '" class="memo_img" >'; 14 endif; 15 ?> 16 <div id="memo_info<?= $memo['id'] ?>"> 17 <?php require('memo_info.php'); ?> 18 <p class="memo_created_at"><?php print '' . convert_to_fuzzy_time($memo['created_at']) . ''; ?></p> 19 </div> 20 </div> 21</div> 22 23<?php endforeach ?>
参考URL
https://ja.javascript.info/mouse-drag-and-drop
https://www.koikikukan.com/archives/2013/12/11-015555.php
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/06/07 10:09