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>
