Click here to Skip to main content
15,941,973 members
Home / Discussions / JavaScript
   

JavaScript

 
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 
Hello & TIA ;
Create a Draggable Clone from id="elem1" , where id="elem1" is draggable="false"; .
The coding problem is here : clone.classList.add('draggable="true"')
Please What is the proper coding ?
Thanks
JavaScript
function cloneElem1(){
// Get the element
var elem = document.querySelector('#elem1');
// Create a copy of it
var clone = elem.cloneNode(true);
// Update the ID and add a class
clone.id = 'elem2' + elemNumber;
elemNumber = elemNumber + 1
clone.classList.add('text-large');
clone.classList.add("draggable='true';")
// Inject it into the DOM
elem.after(clone);
}
</script>

********
JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html</title>
<!--  https://www.freeformatter.com/html-validator.html  -->
<style>
body {
      margin: 20px;
      background-color: #FFFFFF;
    }
.flex-container {
  display: flex;
}
.flex-container > div {
  font-size: 20px;
}
    #container {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      counter-reset: itemCount;
    }
    .item {
      display: inline-block;
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      counter-increment: itemCount;
      content: 'count' + itemCount;
      width: 32px;
      height: 32px;
      background-color: #F5F5F5;  //  whitesmoke
      font-family: Arial, Helvetica, sans-serif;
      text-align:center;
      font-size:28px;
      z-index: 8;
    }
    
.flatOne , .sharpOne , .naturalOne { background-color: #DCDCDC;
z-index: 5;
}
    
td {margin: auto;
}
    
#elem1 , #elem2 , #elem3 , #elem4(
)
.flatOne , .one , .sharpOne , naturalOne {
}
    
#itemContainer {    }
#tableContainer {    }
#fretboardContainer { background-color: #DCDCDC;
}
tbody { background-color:#636363;
}
#tbodyId { background-color:#636363;
}
   .item:active {
      opacity: .75;
    }
    .item:hover {
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="outerContainer" ondrop="drop(event)"  ondragover="allowDrop(event)" style="background-color: pink; top: 4px;  left: 4px; height:200px;  border: 4px;">  <!--  BEGIN OF id="outerContainer  -->
<div>
  X: <span id="x"></span><br>
  Y: <span id="y"></span>
</div>
<!--  BEGIN of id="itemContainer"  -->
<div id="itemContainer"  class="flex-container POS" style=" position: absolute;  left: 500px; top; 40px; "> 
  <div class="item flatOne" id="elem1" onclick="cloneElem1()"      style=" z-index:5;  left: 100px;    background-color: #DCDCDC" > b</div>   
  <p>  </p>
  <div class="item one" id="elem2"            style=" z-index:5;  left: 400px;    background-color: #FF0004;" > 1</div>   
  <p>  </p>
  <div class="item sharpOne" id="elem3"    style=" z-index:5;  left: 700px;    background-color: #DCDCDC;" > ♯</div>   
  <p>  </p>
  <div class="item naturalOne" id="elem4"  style=" z-index:5;  left: 1000px;  background-color: #DCDCDC;" > ♮</div>   
</div>   <!--  END of id="itemContainer"  -->
<div id="tableContainer" style="  position: absolute;  top: 155px; left: 55px; ">  <!--  BEGIN of id="tableContainer"  -->
<table   id="fretboardContainer" style=" position: absolute ; width: 1200px;">    <!-- BEGIN of  id="fretContainer"  -->
<!--  Start Copy Here  -->
<tbody id="tbodyId" style="background-color:#636363;">
<tr style="height: 40px; border-bottom: 2px solid red;  border-top: 3px solid white;"> 
<!-- Row 1  -->
<td id="r1f1" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 3px solid white;  border-top: 4px solid white;"><br>
</td>
<td id="r1f2" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br>
</td>
<td id="r1f3" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br>
</td>
<td id="r1f4" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br>
</td>
</tr>
</tbody>
</table> <!--  END OF  fretContainer   -->
</div>    <!--   END OF  tableContainer   -->
</div>    <!--  END OF id="outerContainer  -->
<div style='text-align: center; position:absolute; bottom: 40px;'>Drag and Drop</div>
<!--  BEGIN SCRIPT  ZZZZZZZZZZZZZZZZZ  -->
<script>
window.addEventListener('mousemove', (event) => {
  let x = event.clientX;
  let y = event.clientY;
  document.getElementById('x').innerHTML = x;
  document.getElementById('y').innerHTML = y;
});
</script>
<script>
var elemNumber = 0;
</script>
<script>
function cloneElem1(){
// Get the element
var elem = document.querySelector('#elem1');
// Create a copy of it
var clone = elem.cloneNode(true);
// Update the ID and add a class
clone.id = 'elem2' + elemNumber;
elemNumber = elemNumber + 1
clone.classList.add('text-large');
clone.classList.add("draggable="true"")
// Inject it into the DOM
elem.after(clone);
}
</script>
<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>

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 
AnswerRe: Need Help with Drag n Drop... Pin
Richard Deeming21-Dec-22 21:26
mveRichard Deeming21-Dec-22 21:26 
GeneralRe: Need Help with Drag n Drop... Pin
VernonM22-Dec-22 5:50
VernonM22-Dec-22 5:50 
QuestionJavascript cookies Pin
Member 158197443-Nov-22 20:46
Member 158197443-Nov-22 20:46 
AnswerRe: Javascript cookies Pin
Jeremy Falcon17-Nov-22 13:32
professionalJeremy Falcon17-Nov-22 13:32 
AnswerRe: Javascript cookies Pin
JohnG1013-Dec-22 0:40
JohnG1013-Dec-22 0:40 
Questionwhy javascript onchange not triggered for persian characters ? Pin
shaho zakaryaee23-Oct-22 21:47
shaho zakaryaee23-Oct-22 21:47 
AnswerRe: why javascript onchange not triggered for persian characters ? Pin
Richard Deeming23-Oct-22 21:49
mveRichard Deeming23-Oct-22 21:49 
AnswerRe: why javascript onchange not triggered for persian characters ? Pin
shaho zakaryaee23-Oct-22 21:58
shaho zakaryaee23-Oct-22 21:58 
GeneralRe: why javascript onchange not triggered for persian characters ? Pin
Jeremy Falcon26-Oct-22 11:10
professionalJeremy Falcon26-Oct-22 11:10 
QuestionDodger game with eventListener Pin
Ali Ibrahim jasim16-Oct-22 2:54
Ali Ibrahim jasim16-Oct-22 2:54 
AnswerRe: Dodger game with eventListener Pin
Jeremy Falcon26-Oct-22 11:26
professionalJeremy Falcon26-Oct-22 11:26 
QuestionHTML5 Nested drag and drop using vuejs2 Pin
Maseeha K30-Sep-22 23:40
Maseeha K30-Sep-22 23:40 
AnswerRe: HTML5 Nested drag and drop using vuejs2 Pin
Jeremy Falcon26-Oct-22 11:12
professionalJeremy Falcon26-Oct-22 11:12 

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.