Assalamu'alaikum wr wb,
kali ini saya akan share bagaimana Cara drag text ke dalam div di javascript,
berikut ini syntaxnya.
<style type="text/css">
#dropzone {
width: 350px;
height: 70px;
padding: 10px;
}
.static {
border: 1px solid #aaaaaa;
}
.drop-into-me {
border: 1px dotted #aaaaaa;
}
.over-me {
background-color: yellow;
border: 1px dotted #aaaaaa;
}
</style>
<div id="dropzone" class="static" ondrop="onDrop(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)"></div>
<br>
<div id="a-draggable-div" draggable="true" ondragend="onDragEnd(event)" ondragstart="onDragStart(event)">
<h4>D
<script type="text/javascript">
function onDragOver(e) {
e.preventDefault();
e.target.className = "over-me";
}
function onDragLeave(e) {
e.target.className = "static";
}
function onDragStart(e) {
e.target.innerHTML = "<h4>You are Dragging me</h4>";
document.getElementById('dropzone').className = 'drop-into-me'
}
function onDragEnd(e) {
e.target.innerHTML = "<h4>Drag Me into the Box :)</h4>";
document.getElementById('dropzone').className = 'static'
if (e.target.parentElement.id === "dropzone") {
e.target.innerHTML = "<h4>Yayyy !! :)</h4>";
}
}
function onDrop(e) {
e.preventDefault();
var draggableDiv = document.getElementById("a-draggable-div");
draggableDiv.setAttribute("draggable", "false");
e.target.appendChild(draggableDiv);
}
</script>
Semoga bermanfaat.
https://pangeran-it.blogspot.co.id/
Cara drag text ke dalam div di javascript
Reviewed by Syawaluddin Amin, S.Kom
on
September 30, 2017
Rating:
Tidak ada komentar: