Форум

Moloch · #1 (**permalink**) 25.04.2015, 23:42

Здравствуйте, подскажите пожалуйста как при помощи метода 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 });
	        			
	        		});
	        	});

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

рони · #2 (**permalink**) 25.04.2015, 23:48

Moloch,
defaultCoords[indx]["pos_x"]

Moloch · #3 (**permalink**) 26.04.2015, 10:58

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

рони · #4 (**permalink**) 26.04.2015, 11:09

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>

Moloch · #5 (**permalink**) 26.04.2015, 11:37

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

рони · #6 (**permalink**) 26.04.2015, 11:42

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

Moloch · #7 (**permalink**) 26.04.2015, 11:56

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

рони · #8 (**permalink**) 26.04.2015, 12:19

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>

Moloch · #9 (**permalink**) 26.04.2015, 12:42

с 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"] });
	        			
	        		});
	        	});
			
	 	});

рони · #10 (**permalink**) 26.04.2015, 12:53

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

Форум

Справочник

Discord чат

Курсы javascript