Javascript-форум - метод position

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - метод position (https://javascript.ru/forum/jquery/55396-metod-position.html)

метод position

Здравствуйте, подскажите пожалуйста как при помощи метода position задавать позицию элемента на странице?
допустим у меня есть массив объектов

defaultCoords []

в котором хранятся объекты

defaultCoords[i] = {
    pos_x :"pos_x",
   pos_y :"pos_y"
}

в какой то момент каждому элементу из некоторой выборки я хочу назначить позицию на странице вешаю обработчик на кнопку

$('#join').on('click.joinMyFigure', function() {
	        		

	        		$('.segment').each(function(indx,s){
	        			var e=$(s);
	        			
	        			
	        			e.position({left: defaultCoords[indx].pos_x,top: defaultCoords[indx].pos_y });
	        			
	        		});
	        	});

и.. ничего не происходит при нажатии позиция элементам не назначается. Почему?

Moloch,
defaultCoords[indx]["pos_x"]

неа . все равно не происходит ничего

Moloch,

Цитата:

Сообщение от Moloch

e.position

position только для чтения -- используйте css

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  .segment {
    background: #FFCC00;
    width: 100px;
    height: 100px;
    position: absolute;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
    var defaultCoords = [{
        pos_x: 10,
        pos_y: 20
    }, {
        pos_x: 30,
        pos_y: 40
    }];
    $(".segment").each(function(indx, s) {
        var e = $(s);
        e.css({
            left: defaultCoords[indx]["pos_x"],
            top: defaultCoords[indx]["pos_y"]
        })
    })
});
  </script>
</head>

<body>
<div class="segment">1</div>
<div class="segment">2</div>
</body>

</html>

Я использую UI и если для left и top я буду использовать css то координаты будут заданы не так как мне нужно вот на картинке пример того что получается. я конечно решил проблему обнулением css-ных top и left , но если я например захочу чтобы при нажатии кнопки блоки рандомно принимали координаты из заданного диапазона то мне не получится подружить" position.left и left

Moloch,
почему position тогда а не offset-- замените тогда не на css а на offset

Кстати! все получилось. Спасибо Вам. че я сразу не подумал так сделать

Moloch,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

  .segment {
    background: #FFCC00;
    width: 100px;
    height: 100px;
    position:  relative;
    float: left;
  }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
 $(function() {
    var defaultCoords = [], rand = function() {
    return Math.floor(Math.random() * 200) + 10;
};
    $(".segment").each(function(indx, s) {
        var e = $(s).offset();
        defaultCoords[indx] = {"pos_x" : e.left, "pos_y" : e.top}
     }).css({"position" : "absolute"}).each(function(indx, s) {
        var e = $(s);
        e.offset({
            left: rand(),
            top: rand()
        })
    })
    function animR()
    {
       $(".segment").each(function(indx, s) {
        var e = $(s);
        e.animate({
            left: defaultCoords[indx]["pos_x"],
            top: defaultCoords[indx]["pos_y"]
        })
    })
    }
    window.setTimeout(animR, 2000)
});
  </script>
</head>

<body>
<div class="segment">1</div>
<div class="segment">2</div>
</body>

</html>

с position:absolute вообще все печально становится =( Вот код

<div id="wrapper">
		<div class="container">
		   
		</div>
		 <p><button id="dissect">Разрезать картинку</button></p>
		 <p><button id="join">Собрать картинку</button></p>
	</div>
	<div class="coord">
		<span class="number">1</span>
		<span class="x">2</span>
		<span class="y">3</span>
	</div>

<style type="text/css">
 	.container+p {
 		clear: both;
 	}
 	.container {
 		background: url('1.png') no-repeat;
 		width: 646px;
 		height: 909px;
 		background-size:contain;
 		position: relative;
 	}
 	.coord span {
 		display: block;
 		font-size: 1.5em;
 	}
 	</style>

$(function(){

		var defaultCoords = [];
		function dissectMyFigure (num) {
			   	var el = $('.container');
			   	for (var i =0;i < num;i++) {
			   		el.append('<div class = "segment"></div>')
			   	}
			   	var segment = $('.segment');
			   	segment.css({'border':'1px solid black','float':'left','box-sizing':'border-box','background-image':'url("1.png")', 'overflow':'hidden'});

			   	//segment.draggable();
			   	
			   	segment.width(function(i,w){
			   			w = el.width()/num*3;
			   			return w;
			   		});
			   		
			   	segment.height(function(i,h){
			   			h = el.height()/num*3;
			   			return h;
			   		});

			   	el.css({'background':'transparent'});

			   	segment.each(function(indx,self){
			   	 	elm=$(self);
			   	 	var pos_x=elm.position().left;
			   	 	var pos_y=elm.position().top;
			   	 	defaultCoords[indx] = {pos_x :pos_x,pos_y :pos_y};
			   	 	elm.css({'background-position-x':'-'+pos_x+'px','background-position-y':'-'+pos_y+'px',})
			   	 	//console.log('для '+indx+'элемента'+'x :'+pos_x+', y :'+pos_y);
			   	 	
			   	 	elm.draggable({
			   	 		start: function () {
			   	 			$('.number').text('сегмент под номером: '+indx);
			   	 		},

				        drag: function() {
				            $('.x').text("По Х: "+$(this).offset().left);
				            $('.y').text("По У: "+$(this).offset().top);
				        }
			   	 	//console.log('координаты '+indx+' элемента по Х '+ elm.position().left +'по У'+elm.position().top);
			   		});
			   	 });
			};

			   $('#dissect').on('click.dissectMyFigure', function() {
	        		dissectMyFigure(9);
	        	});
			   $('#join').on('click.joinMyFigure', function() {
	        		

	        		$('.segment').each(function(indx,s){
	        			var e=$(s);
	        			//e.draggable("destroy");
	        			e.animate({
	        				left:defaultCoords[indx]["pos_x"],
	        				top:defaultCoords[indx]["pos_y"]
	        			},2000, function(){
	        				e.remove();
	        				$('.container').css('background-image','url("1.png")');
	        			});
	        			//e.css({'left':defaultCoords[indx]["pos_x"]+'px','top':defaultCoords[indx]["pos_y"]+'px'});
	        			//e.offset({left: defaultCoords[indx]["pos_x"],top: defaultCoords[indx]["pos_y"] });
	        			
	        		});
	        	});
			
	 	});

Moloch,
можно весь макет сразу а не по блочно?

Цитата:

Сообщение от рони (Сообщение 368329)

Moloch,
можно весь макет сразу а не по блочно?

Огласите весь список, пожалуйста :)

Разрезать картинку

Moloch,
:write: после разрезки растащить в ручную

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .segment {
    position:  relative;
    background: url('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif') no-repeat;
    margin: 0;
    float: left;
  }
  .container {
 		background: url('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif') no-repeat;
 		width: 500px;
 		height: 300px;
 		position: relative;
        background-size:  500px 300px;
        padding: 0;
        margin: 0 auto;
 	}
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script>
$(function() {
    var defaultCoords = [],
        el = $(".container");

    function dissectMyFigure(h, l) {
        el.css({
            "background-image": "none"
        });
        var width = el.width() / l - 2,
            height = el.height() / h - 2;
            backgroundSize = el.width()+ 'px ' + el.height() + 'px'

        $.each(Array(h * l), function(indx, element) {
            var div = $("<div/>", {
                "class": "segment",
                "css": {
                    "width": width,
                    "height": height,
                    "border": "1px solid black",
                    "backgroundSize" : backgroundSize
                }
            }).appendTo(el)
        });
        $(".segment").each(function(indx, s) {
            var e = $(s).position();
            var pos_x = e.left;
            var pos_y = e.top;
            defaultCoords[indx] = {
                "pos_x": pos_x,
                "pos_y": pos_y
            };
            $(s).css({
                left: pos_x,
                top: pos_y,
                "background-position-x": "-" +
                    pos_x + "px",
                "background-position-y": "-" + pos_y + "px"
            })
        }).css({
            "position": "absolute"
        }).draggable()
    }
    $("#dissect").on("click", function() {
        dissectMyFigure(5, 3)
    });
    $("#join").on("click", function() {
        $(".segment").each(function(indx, s) {
            var e = $(s);
            e.animate({
                left: defaultCoords[indx]["pos_x"],
                top: defaultCoords[indx]["pos_y"]
            }, 2000, function() {
                e.remove();
                $(".container").css("background-image", 'url("http://javascript.ru/forum/images/ca_serenity/misc/logo.gif")')
            })
        })
    })
});
  </script>
</head>

<body>
<div class="container">

</div>
<p><button id="dissect">Разрезать картинку</button></p>
<p><button id="join">Собрать картинку</button></p>
</body>

</html>

клево, жаль я сам до этого не додумался. а что происходит вот в этом блоке

$.each(Array(h * l), function(indx, element) {
            var div = $("<div/>", {
                "class": "segment",
                "css": {
                    "width": width,
                    "height": height,
                    "border": "1px solid black",
                    "backgroundSize" : backgroundSize
                }
            }).appendTo(el)

что за параметр Array(h * l)? я в документации по этому методу не нашел.
и че такое backgroundSize? такого правила нету в css

Цитата:

Сообщение от Moloch

что за параметр Array(h * l)?

Цитата:

Сообщение от Moloch

for (var i =0;i < num;i++) {

тотже for что у вас -- создание нескольких див - h и l можно менять -- но в некоторых случаях удобнее each и обычно делают позицию по номеру строки и столбца -- чтобы не вычислять я использовал float, который сразу дал нужные значения позиции

Цитата:

Сообщение от Moloch

я в документации по этому методу не нашел

jQuery.each( array, callback )

что такое backgroundSize и для чего он здесь нужен?

Moloch,
чтобы фон в маленьком див был того же размера что в блоке container -- можно заранее вынести в css -- а можно вычислять backgroundSize и контейнера и маленьких див -- тогда код будет универсальным - в расчёте на плагин сделано.