Membuat draggable element dengan jQuery

Ternyata menyenangkan bukan menggunakan jQuery, setelah kemarin kita mencoba Menyembunyikan dan menampilkan element dengan jQuery .

Sekarang berlanjut membuat efek draggable, yaitu membuat salah satu atau sebagian element website bisa di pindahkan.

Kali ini jQuery tidak sendirian tapi datang bersama saudaranya yaitu jQuery UI, penasaran dengan scriptnya ? kita simak dibawah ini.

Script draggable dengan jQuery

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>Membuat draggable element dengan jQuery</title>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
	
<!-- begin CSS code -->

<style>
body {
    background: lightgreen; 
    font: 14px arial,sans-serif;
    margin: 10px;
}
div  {
    background: #f5f5f5; 
    color: #000; 
    padding: 8px; 
    width: 340px;
    text-align: center;
    border: 1px solid #00f;
    border-radius: 8px;	
}
div  {
    background: #f5f5f5; 
    color: #000; 
    padding: 8px; 
    width: 340px;
    text-align: center;
    border: 1px solid #00f;
    border-radius: 8px;	
}
.c1 {
    cursor: move;
}
.c1:hover {
    background: white;
    border: 1px solid red;
    color: blue;	
}
</style>

<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<h2>Membuat draggable element dengan jQuery</h2>
	
    <div class="c1">
        Element ini bisa dipindahkan dengan cara draggable<br>Cobalah untuk memindahkan
    </div>
	
    <div style="margin-top:10px;">
        Sedangkan element yang ini tidak dapat di pindahkan
    </div>

<!-- Begin JS code -->
  
<script>
$(function () {
	$(".c1").draggable();
});
</script>

<!-- End of JS code -->
<!-- End of body content -->

</body>
</html>

Yang di highligt pada No.06 dan No.07 dari script diatas adalah external link yang kita gunakan untuk membuat element draggable.

Silahkan lihat hasil script di atas di halaman Realtime HTML Editor ↗, Anda di perbolehkan, men-Copy script diatas.

Semoga bermanfaat script Membuat draggable element dengan jQuery, salam sukses selalu buat Anda semuanya.

Mungkin Anda Menyukai