Dimensi TutupBotol: Drag-Drop Angka

Thursday, August 30, 2018

Membuat Drag and Drop Angka di Javascript - I

Ookie disini kita setting awal projectnya dulu... Jadi silahkan cari list angka2 dari google, trs tempatin dalam suatu folder, ters buat index.hmtl, style.css, dan script.js... semuanya akan terlihat seperti ini :

Isi index.html seperti ini :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> Drag Drop Angka </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

    
    <script src="script.js"></script>
    </body>
</html>

Seeepsss... berikutnya kita masukin semua angka-angka kita kedalam file html, contoh 1 biji kek gini propertinya...

1 2	<img draggable="true" id='angka_0a' src="_angka/0a.png" alt="angka_0a" style="position: absolute; left: 34px; top: 34px; z-index: 7;" />

Jadi klu dimasukin semua angkanya.. jadinya seperti ini :

    <body>
        <img draggable="true" id='angka_0a' src="_angka/0a.png" alt="angka_0a"
        style="position: absolute; left: 34px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_1a' src="_angka/1a.png" alt="angka_1a"
        style="position: absolute; left: 44px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_2a' src="_angka/2a.png" alt="angka_2a"
        style="position: absolute; left: 54px; top: 300px; z-index: 7;" />

        <img draggable="true" id='angka_3a' src="_angka/3a.png" alt="angka_3a"
        style="position: absolute; left: 664px; top: 234px; z-index: 7;" />

        <img draggable="true" id='angka_4a' src="_angka/4a.png" alt="angka_4a"
        style="position: absolute; left: 274px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_5a' src="_angka/5a.png" alt="angka_5a"
        style="position: absolute; left: 40px; top: 534px; z-index: 7;" />

        <img draggable="true" id='angka_6a' src="_angka/6a.png" alt="angka_6a"
        style="position: absolute; left: 340px; top: 304px; z-index: 7;" />

        <img draggable="true" id='angka_7a' src="_angka/7a.png" alt="angka_7a"
        style="position: absolute; left: 734px; top: 34px; z-index: 7;" />

        <img draggable="true" id='angka_8a' src="_angka/8a.png" alt="angka_8a"
        style="position: absolute; left: 500px; top: 300px; z-index: 7;" />

        <img draggable="true" id='angka_9a' src="_angka/9a.png" alt="angka_9a"
        style="position: absolute; left: 600px; top: 550px; z-index: 7;" />
    
        <script src="script.js"></script>
    </body>

Kalu kita liad disitu ada draggable = "true", itu mskdnya biar tar bisa didrag...berikutnya kita taroin styling cursor move di css kyk gini :

Hasilnya :

(cursor movenya g' bisa diprint screent trnyata.. :D)

Siipsss.... sampai disini dl... berikutnya kita akan beralih kebagian javascriptnya... See yaa in the next post...