draggable

Этот атрибут определяет возможность перетаскивать элемент или нет.

Значение :

style.css

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>New Page</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="div1" draggable="true" ondragstart="funDrag(event)">
<p id="text1">Drag this square</p>
</div>
<div class="a">
<div id="div2" ondrop="funDrop(event)" ondragover=" funAllowDrop(event)"></div>
</div>
<script>
function funAllowDrop(e) {
e.preventDefault();
}
function funDrag(e) {
e.dataTransfer.setData("text/plain", e.target.id);
}
function funDrop(e) {
var data = e.dataTransfer.getData("text/plain");
e.target.appendChild(document.getElementById(data));
e.preventDefault();
document.getElementById("text1").innerHTML = "Yes!!!";
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>New Page</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div id="div1" draggable="true" ondragstart="funDrag(event)">
<p id="text1">Drag this square</p>
</div>
<div class="a">
<div id="div2" ondrop="funDrop(event)" ondragover=" funAllowDrop(event)"></div>
</div>
<script>
function funAllowDrop(e) {
e.preventDefault();
}
function funDrag(e) {
e.dataTransfer.setData("text/plain", e.target.id);
}
function funDrop(e) {
var data = e.dataTransfer.getData("text/plain");
e.target.appendChild(document.getElementById(data));
e.preventDefault();
document.getElementById("text1").innerHTML = "Yes!!!";
}
</script>
</body>
</html>