div pozisyonu - R10.net

27-01-2017, 23:15:46

Merhabalar,
Aşağıdaki kod ile div leri hareket ettirebiliyorum. Fakat bu div lerin pozisyonlarını (yani style değerlerini) veritabanına kaydetmem gerekiyor. Bir döngü ile div sayısı kadar gizli text ler oluşturup her div için pozisyonlarını bu text lere yazmak istiyorum. div sayısı veritabanındaki kayıt sayısına göre artıp azalabilir. bu işlemi nasıl yapabilirim.

<!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 = $('#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 #89B;
	background: #BCE;
	height: 58px;
	width: 58px;
	cursor: move;
	top: 120px;
	}
#container {
	height: 299px;
	border: 1px dashed #888;
	}
.active {
	background-color: #BEE;
	border-color: #8BB;
	}
</style>
</body>
</html>

dosyalar için link:http://dosya.co/top8ky5vav6p/Yeni_Klasör_(14).rar.html

31-01-2017, 02:38:49

seogrenci

gonejko adlı üyeden alıntı: mesajı görüntüle

<!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 = $('#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 #89B;
	background: #BCE;
	height: 58px;
	width: 58px;
	cursor: move;
	top: 120px;
	}
#container {
	height: 299px;
	border: 1px dashed #888;
	}
.active {
	background-color: #BEE;
	border-color: #8BB;
	}
</style>
</body>
</html>

dosyalar için link:http://dosya.co/top8ky5vav6p/Yeni_Klasör_(14).rar.html

Sorunu hallettiniz mi bilmiyorum. Ama şu şekilde yapabilirsiniz.

HTML divlerin altına ekleyin;
<div id="sonuc"></div>

daha sonra drag yani taşıma işleminin bitiminde gerekli işlemleri yapabilirsiniz.

Kodlar aşağıdadır.

Input alanını görmek için input type özelliğine text değerini verdim.

gizliInput.setAttribute("type", "text");

siz aşağıdaki gibi yaparsanız gizlemiş olursunuz.

gizliInput.setAttribute("type", "hidden");

                .drag("end", function() {
                    $(this).removeClass("active");
                    var divSayisi = $("div.drag").length;
                    $("#sonuc").html("");
                    for (var i = 0; i < divSayisi; i++) {
                        var gizliInput = document.createElement("input"),
                            gecerliDiv = $(".drag").get(i).style,
                            divTop = gecerliDiv.top,
                            divRight = gecerliDiv.right,
                            divBottom = gecerliDiv.bottom,
                            divLeft = gecerliDiv.left;
                        gizliInput.setAttribute("type", "text");
                        gizliInput.setAttribute("value", divTop + " - " + divLeft);

                        $("#sonuc").append(gizliInput);
                    }
                });