div pozisyonu

27 Ocak Cuma ´17 15:19
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="jquery-1.7.2.js"></script>
<script src="jquery.event.drag-2.2.js"></script>

</head>
<body>
<script type="text/javascript">
jQuery(function($){
    var $div = $('&#35;container');
    var z = 1;
    $('.drag')
        .drag("start",function( ev, dd ){
            $( this ).css('zIndex', z++ );
            $( this ).addClass("active");    
            dd.limit = $div.offset();
            dd.limit.bottom = dd.limit.top + $div.outerHeight() - $( this ).outerHeight();
            dd.limit.right = dd.limit.left + $div.outerWidth() - $( this ).outerWidth();
        })
        .drag(function( ev, dd ){
            $( this ).css({
                top: dd.offsetY,
                left: dd.offsetX,
                top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
                left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) ),
            });  
        })
        .drag("end",function(){
            $( this ).removeClass("active");
        });    
});
</script>

<div id="container"></div>
<div class="drag" id="1" style="left:40px;"></div>
<div class="drag" id="2" style="left:120px;"></div>
<div class="drag" id="3" style="left:200px;"></div>


<style type="text/css">
.drag {
    position: absolute;
    border: 1px solid &#35;89B;
    background: &#35;BCE;
    height: 58px;
    width: 58px;
    cursor: move;
    top: 120px;
    }
&#35;container {
    height: 299px;
    border: 1px dashed &#35;888;
    }
.active {
    background-color: &#35;BEE;
    border-color: &#35;8BB;
    }
</style>
</body>
</html>  

dosyalar için link:http://dosya.co/top8ky5vav6p/Yeni_Klasör_(14).rar.html
Cevap *
İletişim Bilgileri
*
*
E-Posta adresiniz gösterilmeyecektir.
(unut)
Güvenlik Kodu *

Gönderiliyor