Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Получить rel у Div-ов которые в данный момент видны (https://javascript.ru/forum/events/56676-poluchit-rel-u-div-ov-kotorye-v-dannyjj-moment-vidny.html)

ssimm 28.06.2015 18:01

Получить rel у Div-ов которые в данный момент видны
 
Здравствуйте.
Друзья, нужна ваша помощь. Ситуация в следующем:

http://jsfiddle.net/zrh1eLge/1/


Как мне получить атрибуты rel всех дивов, которые в данный момент показаны в блоке «div id="example4"» при прекращении перетаскивания. Т.е. всех дивов, что видит наш глаз в момент события «dragstop»
Уже замучился гуглить. Помогите пожалуйста.

рони 28.06.2015 23:52

Проверка видимости блоков.
 
ssimm,
видимые хотя бы какой-то частью блоки будут красного цвета, иметь класс red.
<!DOCTYPE HTML>
<html>
  <head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
    <style>

body {
	margin:0;
}

.example{
	min-width:500px;
	min-height:300px;
	width:500px;
	height:400px;

	overflow:hidden;
	border: ridge medium #0F3;
}

#drag3,#drag4{

	width:1920px; /*Общая масимальная ширина карты*/
	height:1800px; /*Общая масимальная высота карты*/

	background:url(/dark-textile-background.jpg) repeat;
	overflow:hidden;

	font-size:0; /* убираем горизонтальные отступы */
	line-height:0; /* ...и вертикальные в некоторых браузерах */
	letter-spacing:-1px; /* переубеждаем webkit'ы */
}

div#sector {
	border:1px solid;
	width:60px;
	height:60px;

	display:inline-block;
	zoom:1;
	display: -moz-inline-stack!important;
	line-height:normal;
	letter-spacing:normal;
	//display:inline;

}

.red{
  background-color: #FF0000;
}

    </style>
  </head>
  <body>




    <div id="example4" class="example">
    	<div id="drag4">
			<div id="sector" rel="0_1"></div>
<div id="sector" rel="1_1"></div>
<div id="sector" rel="2_1"></div>
<div id="sector" rel="3_1"></div>
<div id="sector" rel="4_1"></div>
<div id="sector" rel="5_1"></div>
<div id="sector" rel="6_1"></div>
<div id="sector" rel="7_1"></div>
<div id="sector" rel="8_1"></div>
<div id="sector" rel="9_1"></div>
<div id="sector" rel="10_1"></div>

<div id="sector" rel="0_2"></div>
<div id="sector" rel="1_2"></div>
<div id="sector" rel="2_2"></div>
<div id="sector" rel="3_2"></div>
<div id="sector" rel="4_2"></div>
<div id="sector" rel="5_2"></div>
<div id="sector" rel="6_2"></div>
<div id="sector" rel="7_2"></div>
<div id="sector" rel="8_2"></div>
<div id="sector" rel="9_2"></div>
<div id="sector" rel="10_2"></div>

<div id="sector" rel="0_3"></div>
<div id="sector" rel="1_3"></div>
<div id="sector" rel="2_3"></div>
<div id="sector" rel="3_3"></div>
<div id="sector" rel="4_3"></div>
<div id="sector" rel="5_3"></div>
<div id="sector" rel="6_3"></div>
<div id="sector" rel="7_3"></div>
<div id="sector" rel="8_3"></div>
<div id="sector" rel="9_3"></div>
<div id="sector" rel="10_3"></div>

<div id="sector" rel="0_4"></div>
<div id="sector" rel="1_4"></div>
<div id="sector" rel="2_4"></div>
<div id="sector" rel="3_4"></div>
<div id="sector" rel="4_4"></div>
<div id="sector" rel="5_4"></div>
<div id="sector" rel="6_4"></div>
<div id="sector" rel="7_4"></div>
<div id="sector" rel="8_4"></div>
<div id="sector" rel="9_4"></div>
<div id="sector" rel="10_4"></div>

<div id="sector" rel="0_5"></div>
<div id="sector" rel="1_5"></div>
<div id="sector" rel="2_5"></div>
<div id="sector" rel="3_5"></div>
<div id="sector" rel="4_5"></div>
<div id="sector" rel="5_5"></div>
<div id="sector" rel="6_5"></div>
<div id="sector" rel="7_5"></div>
<div id="sector" rel="8_5"></div>
<div id="sector" rel="9_5"></div>
<div id="sector" rel="10_5"></div>

<div id="sector" rel="0_6"></div>
<div id="sector" rel="1_6"></div>
<div id="sector" rel="2_6"></div>
<div id="sector" rel="3_6"></div>
<div id="sector" rel="4_6"></div>
<div id="sector" rel="5_6"></div>
<div id="sector" rel="6_6"></div>
<div id="sector" rel="7_6"></div>
<div id="sector" rel="8_6"></div>
<div id="sector" rel="9_6"></div>
<div id="sector" rel="10_6"></div>

<div id="sector" rel="0_7"></div>
<div id="sector" rel="1_7"></div>
<div id="sector" rel="2_7"></div>
<div id="sector" rel="3_7"></div>
<div id="sector" rel="4_7"></div>
<div id="sector" rel="5_7"></div>
<div id="sector" rel="6_7"></div>
<div id="sector" rel="7_7"></div>
<div id="sector" rel="8_7"></div>
<div id="sector" rel="9_7"></div>
<div id="sector" rel="10_7"></div>

<div id="sector" rel="0_8"></div>
<div id="sector" rel="1_8"></div>
<div id="sector" rel="2_8"></div>
<div id="sector" rel="3_8"></div>
<div id="sector" rel="4_8"></div>
<div id="sector" rel="5_8"></div>
<div id="sector" rel="6_8"></div>
<div id="sector" rel="7_8"></div>
<div id="sector" rel="8_8"></div>
<div id="sector" rel="9_8"></div>
<div id="sector" rel="10_8"></div>

<div id="sector" rel="0_9"></div>
<div id="sector" rel="1_9"></div>
<div id="sector" rel="2_9"></div>
<div id="sector" rel="3_9"></div>
<div id="sector" rel="4_9"></div>
<div id="sector" rel="5_9"></div>
<div id="sector" rel="6_9"></div>
<div id="sector" rel="7_9"></div>
<div id="sector" rel="8_9"></div>
<div id="sector" rel="9_9"></div>
<div id="sector" rel="10_9"></div>

<div id="sector" rel="0_10"></div>
<div id="sector" rel="1_10"></div>
<div id="sector" rel="2_10"></div>
<div id="sector" rel="3_10"></div>
<div id="sector" rel="4_10"></div>
<div id="sector" rel="5_10"></div>
<div id="sector" rel="6_10"></div>
<div id="sector" rel="7_10"></div>
<div id="sector" rel="8_10"></div>
<div id="sector" rel="9_10"></div>
<div id="sector" rel="10_10"></div>

		</div>
	</div>
	<br><br><br>
	<span id="kkasdjc"></span>


<script>
$(document).ready(function() {
    var x1 = $("#example4").offset().left + $("#example4").outerWidth() - $("#drag4").width();
    var y1 = $("#example4").offset().top + $("#example4").outerHeight() - $("#drag4").height();
    var x2 = $("#example4").offset().left;
    var y2 = $("#example4").offset().top;
    $("#drag4").draggable({
        containment: [x1, y1, x2, y2]
    });
    $("#drag4").css({
        left: "-724px",
        top: "-107px"
    });
    var x1 = $("#example4").offset().left + $("#example4").outerWidth();
    var y1 = $("#example4").offset().top + $("#example4").outerHeight();
    var x2 = $("#example4").offset().left;
    var y2 = $("#example4").offset().top;
    function fn()
    {   $('#kkasdjc').text('');
        $("div[rel]").each(function(indx, element) {
            var el = $(element);
            var rel = el.attr("rel");
            var pos = el.offset();
            var h = el.outerHeight();
            var w = el.outerWidth();
            var ok = pos.top < y1 && pos.top + h > y2 && pos.left < x1 && pos.left + w > x2;
            el[(ok ? "add" : "remove") + "Class"]("red") ;
            ok && $('#kkasdjc').append('| '+rel);
        })

    }
    $("#drag4").bind("dragstop", function(event, ui) {
         fn()
    })
});
</script>

  </body>
</html>


Часовой пояс GMT +3, время: 00:11.