Cara drag text ke dalam div di javascript


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 Cara drag text ke dalam div di javascript Reviewed by Syawaluddin Amin, S.Kom on September 30, 2017 Rating: 5

Tidak ada komentar:

Diberdayakan oleh Blogger.