tRikSonic

Tema

HTML draggable Attribute

Terakhir diperbarui : 8 April 2018 - 09.37

HTML draggable Attribute - HTML draggable Attribute Digunakan untuk menentukan apakah element dapat dipindah, digeser atau tidak. Dalam Penggunaanya attribut draggable menggunakan fungsi dari javascript ataupun jquery.

Attribute Value:

Attribute	Value	Deskripsi
draggable	true false auto	Menentukan element `dapat` di drag atau di pindahkan Menentukan element `tidak dapat` di drag atau di pindahkan Menggunakan system dari browser

Contoh penerapan HTML draggable Attribute

<div class="nama-class" draggable="true">

...isi kontent ...

</div

Browser Support:

Nilai pada tabel adalah minimal versi browser support untuk attribute draggable

HTML
Attribute	Chrome	Safari	Firefox	Opera	IE / Edge
draggable	4.0	6.0	3.5	12.0	9.0

Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}:after,:before{box-sizing:border-box}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;}button.close{-webkit-appearance:none;}input#atur_split{-webkit-appearance: none;}input#atur_split::-webkit-slider-runnable-track {-webkit-appearance: none;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}.no-radius {border-radius:0px!important;-webkit-border-radius : 0px !important;-moz-border-radius : 0px !important;-o-border-radius : 0px !important;-ms-border-radius : 0px !important;-khtml-border-radius : 0px !important;}.btn-trans .badge {-moz-border-radius: 50px;-webkit-border-radius: 50px;-o-border-radius: 50px;-ms-border-radius: 50px;-khtml-border-radius: 50px;}.box-part{-webkit-border-radius:4px;-moz-border-radius:4px;}.gridmode {-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;-khtml-border-radius: 5px;background: #ffffff;}input#atur_split::-webkit-slider-runnable-track {box-shadow: none;border: none;background: transparent;-webkit-appearance:none;}input#atur_split::-moz-range-track {box-shadow: none;border: none;background: transparent;-webkit-appearance:none;}input#atur_split::-moz-focus-outer {border: 0;}input#atur_split::-webkit-slider-thumb {width: 10px;height: 10px;border: 0;background: #42bdca;border-radius: 100%;box-shadow: 0 0 1px 0px rgba(0,0,0,0.1);-webkit-appearance:none;}input#atur_split::-moz-range-thumb {width: 10px;height: 10px;border: 0;background: #42bdca;border-radius: 100%;box-shadow: 0 0 1px 0px rgba(0,0,0,0.1);-webkit-appearance:none;}.no-select,button,.tse-line-number {user-select:none;-moz-user-select:none;-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;-o-user-select:none;}.select-all {user-select:all;-webkit-user-select:all;-moz-user-select:all;-o-user-select:all;-khtml-user-select:all;-ms-user-select:all;}