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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!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 :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    <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...
Diposkan oleh di
Label: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)