Membuat Objek Draggable pada Website dgn CSS ~ Hafifah Bella

Assalamualaikum temen2, terimakasih atas kunjungannya ke blog kecil saya ini :D
langsung saja disini saya mau berbagi sedikit codingan CSS untuk membuat objek di website menjadi Draggable (read: bisa ditarik "bahasa kerennya gtu")..
Ini bisa jadi referensi buat temen2 yang ingin membuat web nya menjadi lebih unik karna objek nya bisa ditarik kemana2 sesuka hati visitor web nya, hhhaa

simpel sih, kaya gini ni..
Tinggal di modif aja deh sesuka hati..
_________________________________________________________

<!DOCTYPE html>

<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#draggable { width: 100px; height: 70px; background: silver; cursor:move; }

</style>
<script>
$(document).ready(function() {
$("#draggable").draggable();
});
$( ".selector" ).draggable({ cursor: 'crosshair' });
//getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
//setter
$( ".selector" ).draggable( "option", "cursor", 'crosshair' );
</script>
</head>
<body style="font-size:62.5%;">

<div id="draggable">Drag me</div>

</body>
</html>
_________________________________________________________

Kalo temen2 mau ganti objeknya tinggal ganti yang di bagian ini

#draggable { width: 100px; height: 70px; background: silver; cursor:move; }

width : untuk lebar objek
height : tinggi objek

background : bisa diganti jadi background-image , sehingga codingnya jadi gini
background-image:url(../BNURkolCAAAzZfI.jpg%20large.jpg)
yang didalam kurung itu adalah tempat penyimpan gambar/objeknya

cursor : itu biarin move aja , jadi biar kursornya ngebentuk panah 4 arah yang menunjukkan bahwa objek itu bisa di drag..

gini ni hasil modifan aku

selamat mencoba dan semoga bermanfaat ^^
Wassalamualaikum.. :D

1 comment: