Click here to Skip to main content
15,883,820 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionI have problem importing images of Json File on HTML Table Pin
Member 1590151922-Jan-23 2:14
Member 1590151922-Jan-23 2:14 
AnswerRe: I have problem importing images of Json File on HTML Table Pin
Jeremy Falcon24-Jan-23 4:30
professionalJeremy Falcon24-Jan-23 4:30 
Questionsoftware access control Pin
Member 1589900419-Jan-23 0:51
Member 1589900419-Jan-23 0:51 
AnswerRe: software access control Pin
Richard Deeming19-Jan-23 1:25
mveRichard Deeming19-Jan-23 1:25 
QuestionUse async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206711-Jan-23 23:35
Member 1589206711-Jan-23 23:35 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 0:02
mveRichard Deeming12-Jan-23 0:02 
QuestionRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 1:38
Member 1589206712-Jan-23 1:38 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 2:31
mveRichard Deeming12-Jan-23 2:31 
PraiseRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Member 1589206712-Jan-23 3:17
Member 1589206712-Jan-23 3:17 
GeneralRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Richard Deeming12-Jan-23 3:39
mveRichard Deeming12-Jan-23 3:39 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Jeremy Falcon12-Jan-23 8:44
professionalJeremy Falcon12-Jan-23 8:44 
AnswerRe: Use async function to retrieve data while looping through from another function to insert objects Pin
Leon Scott Kennedy13-Jan-23 5:25
Leon Scott Kennedy13-Jan-23 5:25 
QuestionJava Script Pin
Prerna Kharbanda3-Jan-23 20:56
professionalPrerna Kharbanda3-Jan-23 20:56 
AnswerRe: Java Script Pin
Richard MacCutchan3-Jan-23 21:33
mveRichard MacCutchan3-Jan-23 21:33 
Questioncalendar validation Pin
Jithin P 202227-Dec-22 20:45
Jithin P 202227-Dec-22 20:45 
AnswerRe: calendar validation Pin
Dave Kreskowiak28-Dec-22 3:59
mveDave Kreskowiak28-Dec-22 3:59 
AnswerRe: calendar validation Pin
Jithin P 202229-Dec-22 3:31
Jithin P 202229-Dec-22 3:31 
AnswerRe: calendar validation Pin
Jeremy Falcon5-Jan-23 11:13
professionalJeremy Falcon5-Jan-23 11:13 
AnswerRe: calendar validation Pin
Jeremy Falcon5-Jan-23 11:17
professionalJeremy Falcon5-Jan-23 11:17 
Questionhow to modify cloned element draggable attribute ? Pin
VernonM23-Dec-22 10:37
VernonM23-Dec-22 10:37 
AnswerRe: how to modify cloned element draggable attribute ? Pin
VernonM23-Dec-22 14:57
VernonM23-Dec-22 14:57 
AnswerRe: how to modify cloned element draggable attribute ? Pin
VernonM24-Dec-22 2:43
VernonM24-Dec-22 2:43 
GeneralRe: how to modify cloned element draggable attribute ? Pin
VernonM25-Dec-22 3:51
VernonM25-Dec-22 3:51 
QuestionNeed Help with Drag n Drop... Pin
VernonM21-Dec-22 10:26
VernonM21-Dec-22 10:26 
Hello & TIA
Need help , Having problem with Drag n Drop ?


My code seems quite simple , but I have been hung up for days :

The first DnD doesnt Drop : 'div id="itemContainer" ' , getting Errors:


JavaScript
Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:131 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at drop (Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:131:16)
    at HTMLTableElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:78:132)


The Second DnD runs fine .

JavaScript
<pre><!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
    .item {
      display: inline-block;
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      counter-increment: itemCount;
      content: 'count' + itemCount;
      width: 32px;
      height: 32px;
      font-family: Arial, Helvetica, sans-serif;
      text-align:center;
      font-size:28px;
      z-index: 8;
    }
</style>
</head>
<body>
<h2>Drag and Drop</h2>
<br>
<div id="itemContainer"   id="dragItems"    ondrop="drop(event)"  ondragover="allowDrop(event)" class="POS"  style=" width:100%;  border: thick solid pink;"> 
<br>  <div class="item" class="flatOne"  id="flatOne"     draggable="true"   style="  background-color: yellow;" >b1</div>   
<br>  <div class="item" class="one"            draggable="true" ondragstart="drag(event)"  style="  background-color: #FF0004;" > 1</div>   
<br>  <div class="item" class="sharpOne"    draggable="true" ondragstart="drag(event)"  style="  background-color: yellow;" >♯1</div>   
<br>  <div class="item" class="naturalOne"  draggable="true" ondragstart="drag(event)"  style="  background-color: yellow;" >♮1</div>   
</div>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="RedCircle.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br><br><br><br>
<br>
<div  ondrop="drop(event)" ondragover="allowDrop(event)"  style=" border: thick solid blue; width:100%; height: 200px;">
</div>
<script>
function allowDrop(ev) {
  ev.preventDefault();
//  console.log("function allowDrop(ev)")
}
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  console.log("function function drag(ev)")
}
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  console.log("function drop(ev)")
}
</script>
</body>
</html>

https://vmars.us/ShowMe/Drag-n-Drop.mp4

modified 21-Dec-22 20:34pm.

AnswerRe: Need Help with Drag n Drop... Pin
Richard Deeming21-Dec-22 21:26
mveRichard Deeming21-Dec-22 21:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.