We Keep Coding

drag and drop of HTML5 not working.Although It is not showing any error

I am trying to drag an element and drop it in the textbox. However It is not working.I am not sure where I am doing wrong.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.textContent);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
var li = document.createElement("li");
li.innerHTML = data;
console.log(li);
// var data=document.createElement('p');
// data.innerHTML=ev.dataTransfer.getData("Text");
// console.log(data);
// console.log(typeof(data));
// ev.target.appendChild(document.getElementById(li));
ev.target.appendChild((li));
ev.preventDefault();
}
<span> <textarea name="name" rows="2" cols="37" ondrop="drop(event)" ondragover="allowDrop(event)" id="target1"></textarea> </span>
<div draggable="true" ondragstart="drag(event)" id="source">Sencha</div>

It seems like what you actually want to do is add the dragged text to the text input, instead of creating a new <li> element and then trying to add that to the text area. That would work if you were adding it to a <div>, for example, but you can't put HTML inside text inputs.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.textContent);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.innerHTML+=data;
ev.preventDefault();
}
<span> <textarea name="name" rows="2" cols="37" ondrop="drop(event)" ondragover="allowDrop(event)" id="target1"></textarea> </span>
<div draggable="true" ondragstart="drag(event)" id="source">Sencha</div>

get div value from inside another div?

so I have a draggable HTML div element:
<div id="server" draggable="true" ondragstart="return dragStart(event)">Server</div>
and a target div:
<div id="target1" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)"></div>
if I drag the draggable into the target, then how do I get the value inside of the draggable if I only have the reference to the target that the draggable is in?

You might be looking to use the dataTransfer.setData method on the drag event and the datatransfer.getData method on the drop event. These methods will allow you to pass data between your elements.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
var newText = ev.target.innerText;
newText = "I've been dropped!";
ev.dataTransfer.setData("text", ev.target.id);
ev.dataTransfer.setData("divData", newText);
console.log(ev.target); //available data
}
function drop(ev) {
var dragElemID = ev.dataTransfer.getData("text");
var dragElemData = ev.dataTransfer.getData("divData");
var draggedElem = document.getElementById(dragElemID)
ev.preventDefault();
ev.target.appendChild(draggedElem);
ev.target.children[0].innerText = dragElemData;
}
#div1{
border:1px solid;
width:100px;
height:150px;
}
#drag1{
background-color:lightblue;
width:100px;
height:100px;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">Target Div</div>
<div id="drag1"draggable="true" ondragstart="drag(event)" width="336" height="69">Drop Div</div>

How to drag and drop something but it doesn't disappear so we can keep on drag and drop it

function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
<div class = “container”>
<div class = “row” >
<div class="col-md-1 center">
<img src="https://i.stack.imgur.com/vxnww.jpg" style="height: 250px">
</div>
<div class="col-md-1">
<div class="boxFirstCol" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> </div>
<p><b>4s</b></p>
<div class="box"> </div>
<p><b>3s</b></p>
<div class="box"> </div>
<p><b>2s</b></p>
<div class="box"> </div>
<p><b>1s</b></p>
</div>
</div>
</div>
There are more codes to make it look this way but I am able to drag and drop the electrons inside the boxes then the electrons from the box will be gone.

Use this :-
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var clonedElement = document.getElementById(data).cloneNode(true);
clonedElement.id = "element_1"; // Set unique id for each element I have used static one.
ev.target.appendChild(clonedElement);
}
You will have to use cloneNode(true) to clone the element.

Ondrop function. Help me complete my function.

I am trying to make a feature of my website where there are multiple pictures and you have to drag an icon ( Turtle ) into a box. I managed to find some codes for what happen if you drag the correct icon.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
window.location.assign("homepage.html");
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="turtle.ico" draggable="true" ondragstart="drag(event)"
width="100" height="100">
<img draggable="true" width="100" height="100" src="fish.ico">
I am now having trouble of writing the code for what happen if you drag the wrong icon (fish.ico) . I am planning for it to have a prompt, saying "Try again" but can't find out how to do it. Can someone help me create of function to do that?

If you have a proper id setup per image you can check if the data in the drop event is turtle.
See below.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if (data !== "turtle") {
alert("Try again!");
return;
}
var img = document.getElementById(data);
ev.target.appendChild(img);
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
drop here
</div>
<img id="turtle" src="turtle.ico" draggable="true" ondragstart="drag(event)" width="100" height="100" />
<img id="fish" src="fish.ico" draggable="true" ondragstart="drag(event)" width="100" height="100" />

Javascript - Keep the original image after dropping it in another container

For example:
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true" ondragstart="drag(event)" width="75" height="75" />
I want to drag the x.png file and drop it into the div, but x.png will move into the div if I do so. How can I achieve that, after I drag and drop, the div gets a x.png, and the original x.png is still where it was?

You can do that by duplicating the required DOM element by using cloneNode(true) method
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
ev.preventDefault();
}
</script>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="x" src="X.png" draggable="true"
ondragstart="drag(event)" width="75" height="75" />

I will stick to the example shown here: http://www.w3schools.com/html/html5_draganddrop.asp
Assuming we have this document:
<!DOCTYPE HTML>
<html>
<head>
<script>
<!-- script comes in the text below -->
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Normal Drag & Drop
Normal drag and drop has such functions assigned to the respective elements:
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
Drag & Copy
Whereas you'll have to alter the drop function so that it copies the DOM element instead of moving it.
//other functions stay the same
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data).cloneNode(true));
}
Try this page: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
And then append a .cloneNode(true) to getElementById(data).
You could even do things like in file managers: Ctrl-Key switches from moving to copying:
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
if (ev.ctrlKey)
ev.target.appendChild(document.getElementById(data).cloneNode(true));
else
ev.target.appendChild(document.getElementById(data));
}