jQuery ile herhangi bir elemana sürükle bırak özelliği kazandırarak tarayıcıda istenilen yere bırakılabilme örneği.
Head etiketleri arasına katacağımız JavaScript kütüphaneleri ve betikleri.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#hareketli_eleman')
.draggable()
.resizable();
});
</script>
Head etiketleri arasına katacağımız CSS betikleri
#hareketli_eleman
{
padding:10px;
background-color:#CC0000;
position:absolute;
/*top:5px;
left:5px;*/
cursor:pointer;
color:#fff;
z-index:200;
}
.hareketli_eleman_kapsul
{
width:550px;
height:200px;
border:1px solid #7fa0a9;
}
Body etiketleri arasına katacağımız HTML betiği.
<div class="hareketli_eleman_kapsul">
<div id="hareketli_eleman">Sürüklenebilen Eleman</div>
</div>
