Получение атрибута rel у видимых div'ов

246

15 декабря 2016, 16:25

HTML:

<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="10_1"></div>
        <div id="sector" rel="0_2"></div>
        ...
        <div id="sector" rel="10_10"></div>
    </div>
</div>
<br><br><br>
<span id="kkasdjc"></span>

JS:

$(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]
        //containment: 'window'
    });
    //изначальная позиция
    $("#drag4").css({
        left: '-724px',
        top: '-107px'
    });
    //Закончено перемещение, 
    $('#drag4').bind('dragstop', function (event, ui) {
        $('#kkasdjc').text($("#drag4").position().left + '  ' + $("#drag4").position().top + ' ||| x1=' + x1 + ' y1=' + y1 + ' x2=' + x2 + ' y2=' + y2);
    });
});

Fiddle.

Как мне получить атрибут rel у всех div'ов, которые в данный момент показаны в блоке <div id="example4">, при прекращении перетаскивания?

То есть всех div'ов, которые мы видим в момент события dragstop.

Answer 1

Используйте JQuery offset(документация). Получив смещение элемента #example4 и его размеры будет очень легко вычислить видимые нам элементы внутри него. Ниже приведен очень грубый, но демонстрирующий работу offset() пример.

Еще вы допустили ошибку используя одинаковый #sector более чем для одного элемента. Атрибут id должен быть уникальным, иначе возникнут проблемы с работой скрипта. Подробнее про него можно прочитать здесь

$(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] 
      //containment: 'window' 
  }); 
 
  //изначальная позиция 
  $("#drag4").css({ 
    left: '-724px', 
    top: '-107px' 
  }); 
 
  //Закончено перемещение,  
  $('#drag4').bind('dragstop', function(event, ui) { 
    var bloks = $('.sector'), 
      arr = [] 
    bloks.each(function(key, el) { 
      var $el = $(el), 
        offsetEl = $el.offset(); 
      if (offsetEl.top > 0 && offsetEl.top < 445 && offsetEl.left > 0 && offsetEl.left < 445) { 
        $el.css('background-color', 'lightgreen'); 
      } else { 
        $el.css('background-color', 'white'); 
      } 
    }); 
    $('#kkasdjc').text($("#drag4").position().left + '  ' + $("#drag4").position().top + ' ||| x1=' + x1 + ' y1=' + y1 + ' x2=' + x2 + ' y2=' + y2); 
  }); 
 
 
});

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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script> 
<div id="example4" class="example"> 
  <div id="drag4"> 
    <div class="sector" rel="0_1"></div> 
    <div class="sector" rel="1_1"></div> 
    <div class="sector" rel="2_1"></div> 
    <div class="sector" rel="3_1"></div> 
    <div class="sector" rel="4_1"></div> 
    <div class="sector" rel="5_1"></div> 
    <div class="sector" rel="6_1"></div> 
    <div class="sector" rel="7_1"></div> 
    <div class="sector" rel="8_1"></div> 
    <div class="sector" rel="9_1"></div> 
    <div class="sector" rel="10_1"></div> 
    <div class="sector" rel="0_2"></div> 
    <div class="sector" rel="1_2"></div> 
    <div class="sector" rel="2_2"></div> 
    <div class="sector" rel="3_2"></div> 
    <div class="sector" rel="4_2"></div> 
    <div class="sector" rel="5_2"></div> 
    <div class="sector" rel="6_2"></div> 
    <div class="sector" rel="7_2"></div> 
    <div class="sector" rel="8_2"></div> 
    <div class="sector" rel="9_2"></div> 
    <div class="sector" rel="10_2"></div> 
    <div class="sector" rel="0_3"></div> 
    <div class="sector" rel="1_3"></div> 
    <div class="sector" rel="2_3"></div> 
    <div class="sector" rel="3_3"></div> 
    <div class="sector" rel="4_3"></div> 
    <div class="sector" rel="5_3"></div> 
    <div class="sector" rel="6_3"></div> 
    <div class="sector" rel="7_3"></div> 
    <div class="sector" rel="8_3"></div> 
    <div class="sector" rel="9_3"></div> 
    <div class="sector" rel="10_3"></div> 
    <div class="sector" rel="0_4"></div> 
    <div class="sector" rel="1_4"></div> 
    <div class="sector" rel="2_4"></div> 
    <div class="sector" rel="3_4"></div> 
    <div class="sector" rel="4_4"></div> 
    <div class="sector" rel="5_4"></div> 
    <div class="sector" rel="6_4"></div> 
    <div class="sector" rel="7_4"></div> 
    <div class="sector" rel="8_4"></div> 
    <div class="sector" rel="9_4"></div> 
    <div class="sector" rel="10_4"></div> 
    <div class="sector" rel="0_5"></div> 
    <div class="sector" rel="1_5"></div> 
    <div class="sector" rel="2_5"></div> 
    <div class="sector" rel="3_5"></div> 
    <div class="sector" rel="4_5"></div> 
    <div class="sector" rel="5_5"></div> 
    <div class="sector" rel="6_5"></div> 
    <div class="sector" rel="7_5"></div> 
    <div class="sector" rel="8_5"></div> 
    <div class="sector" rel="9_5"></div> 
    <div class="sector" rel="10_5"></div> 
    <div class="sector" rel="0_6"></div> 
    <div class="sector" rel="1_6"></div> 
    <div class="sector" rel="2_6"></div> 
    <div class="sector" rel="3_6"></div> 
    <div class="sector" rel="4_6"></div> 
    <div class="sector" rel="5_6"></div> 
    <div class="sector" rel="6_6"></div> 
    <div class="sector" rel="7_6"></div> 
    <div class="sector" rel="8_6"></div> 
    <div class="sector" rel="9_6"></div> 
    <div class="sector" rel="10_6"></div> 
    <div class="sector" rel="0_7"></div> 
    <div class="sector" rel="1_7"></div> 
    <div class="sector" rel="2_7"></div> 
    <div class="sector" rel="3_7"></div> 
    <div class="sector" rel="4_7"></div> 
    <div class="sector" rel="5_7"></div> 
    <div class="sector" rel="6_7"></div> 
    <div class="sector" rel="7_7"></div> 
    <div class="sector" rel="8_7"></div> 
    <div class="sector" rel="9_7"></div> 
    <div class="sector" rel="10_7"></div> 
    <div class="sector" rel="0_8"></div> 
    <div class="sector" rel="1_8"></div> 
    <div class="sector" rel="2_8"></div> 
    <div class="sector" rel="3_8"></div> 
    <div class="sector" rel="4_8"></div> 
    <div class="sector" rel="5_8"></div> 
    <div class="sector" rel="6_8"></div> 
    <div class="sector" rel="7_8"></div> 
    <div class="sector" rel="8_8"></div> 
    <div class="sector" rel="9_8"></div> 
    <div class="sector" rel="10_8"></div> 
    <div class="sector" rel="0_9"></div> 
    <div class="sector" rel="1_9"></div> 
    <div class="sector" rel="2_9"></div> 
    <div class="sector" rel="3_9"></div> 
    <div class="sector" rel="4_9"></div> 
    <div class="sector" rel="5_9"></div> 
    <div class="sector" rel="6_9"></div> 
    <div class="sector" rel="7_9"></div> 
    <div class="sector" rel="8_9"></div> 
    <div class="sector" rel="9_9"></div> 
    <div class="sector" rel="10_9"></div> 
    <div class="sector" rel="0_10"></div> 
    <div class="sector" rel="1_10"></div> 
    <div class="sector" rel="2_10"></div> 
    <div class="sector" rel="3_10"></div> 
    <div class="sector" rel="4_10"></div> 
    <div class="sector" rel="5_10"></div> 
    <div class="sector" rel="6_10"></div> 
    <div class="sector" rel="7_10"></div> 
    <div class="sector" rel="8_10"></div> 
    <div class="sector" rel="9_10"></div> 
    <div class="sector" rel="10_10"></div> 
  </div> 
</div> 
<br> 
<br> 
<br> 
<span id="kkasdjc"></span>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Microdata и продвижение

Подскажите, собрался переводить сайт на html5 и встал вопрос - реально ли влияет на продвижение и/или улучшение индексации сайта Microdata? Так же вот...

273

HTML