Click here to Skip to main content
15,844,673 members
Home / Discussions / JavaScript
   

JavaScript

 
AnswerRe: calendar validation Pin
Jithin P 202229-Dec-22 4:31
Jithin P 202229-Dec-22 4:31 
AnswerRe: calendar validation Pin
Jeremy Falcon5-Jan-23 12:13
professionalJeremy Falcon5-Jan-23 12:13 
AnswerRe: calendar validation Pin
Jeremy Falcon5-Jan-23 12:17
professionalJeremy Falcon5-Jan-23 12:17 
Questionhow to modify cloned element draggable attribute ? Pin
VernonM23-Dec-22 11:37
VernonM23-Dec-22 11:37 
AnswerRe: how to modify cloned element draggable attribute ? Pin
VernonM23-Dec-22 15:57
VernonM23-Dec-22 15:57 
AnswerRe: how to modify cloned element draggable attribute ? Pin
VernonM24-Dec-22 3:43
VernonM24-Dec-22 3:43 
GeneralRe: how to modify cloned element draggable attribute ? Pin
VernonM25-Dec-22 4:51
VernonM25-Dec-22 4:51 
QuestionNeed Help with Drag n Drop... Pin
VernonM21-Dec-22 11:26
VernonM21-Dec-22 11: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 22:26
mveRichard Deeming21-Dec-22 22:26 
GeneralRe: Need Help with Drag n Drop... Pin
VernonM22-Dec-22 6:50
VernonM22-Dec-22 6:50 
QuestionJavascript cookies Pin
Member 158197443-Nov-22 21:46
Member 158197443-Nov-22 21:46 
AnswerRe: Javascript cookies Pin
Jeremy Falcon17-Nov-22 14:32
professionalJeremy Falcon17-Nov-22 14:32 
AnswerRe: Javascript cookies Pin
JohnG1013-Dec-22 1:40
JohnG1013-Dec-22 1:40 
Questionwhy javascript onchange not triggered for persian characters ? Pin
shaho zakaryaee23-Oct-22 22:47
shaho zakaryaee23-Oct-22 22:47 
AnswerRe: why javascript onchange not triggered for persian characters ? Pin
Richard Deeming23-Oct-22 22:49
mveRichard Deeming23-Oct-22 22:49 
AnswerRe: why javascript onchange not triggered for persian characters ? Pin
shaho zakaryaee23-Oct-22 22:58
shaho zakaryaee23-Oct-22 22:58 
GeneralRe: why javascript onchange not triggered for persian characters ? Pin
Jeremy Falcon26-Oct-22 12:10
professionalJeremy Falcon26-Oct-22 12:10 
QuestionDodger game with eventListener Pin
Ali Ibrahim jasim16-Oct-22 3:54
Ali Ibrahim jasim16-Oct-22 3:54 
AnswerRe: Dodger game with eventListener Pin
Jeremy Falcon26-Oct-22 12:26
professionalJeremy Falcon26-Oct-22 12:26 
QuestionHTML5 Nested drag and drop using vuejs2 Pin
Maseeha K1-Oct-22 0:40
Maseeha K1-Oct-22 0:40 
AnswerRe: HTML5 Nested drag and drop using vuejs2 Pin
Jeremy Falcon26-Oct-22 12:12
professionalJeremy Falcon26-Oct-22 12:12 
Questiontrying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 5:22
DSB Audio (David Sweeney-Bear)30-Sep-22 5:22 
AnswerRe: trying to get to grips with parsing from a JSON file Pin
Richard MacCutchan30-Sep-22 5:53
mveRichard MacCutchan30-Sep-22 5:53 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
DSB Audio (David Sweeney-Bear)30-Sep-22 6:42
DSB Audio (David Sweeney-Bear)30-Sep-22 6:42 
GeneralRe: trying to get to grips with parsing from a JSON file Pin
Richard MacCutchan30-Sep-22 6:49
mveRichard MacCutchan30-Sep-22 6:49 

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.