Блочное выделение

@brain-4-me · Регистрация: 24.12.2013

Студворк — интернет-сервис помощи студентам

Добрый день! Вопрос вот в чем)
Есть скрипт функция которого выделение блока мест

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
var getNextNode = (prevNode) => {
  return prevNode.next()
}
 
var setBlockPlace = (event, element, className, status, selectedClass) => {
    //Пустой массив для сбора всех Id
    arr = [];
  if (window.getSelection()) window.getSelection().removeAllRanges();
        else if (document.selection && document.selection.clear) document.selection.clear();
  if(!event.shiftKey && !event.ctrlKey){
    startIndex = element.parent().index();
    startParentIndex = element.parent().parent().index();
        firstParent = element.parent().parent()
    secondStartIndex = element.parent().index();
  }
  if(event.shiftKey){
    var endChildIndex = 0;
    endIndex = element.parent().index();
    endParentIndex = element.parent().parent().index();
        lastParent = element.parent().parent();
    for(startParentIndex; startParentIndex <= endParentIndex; startParentIndex++){
            if(firstParent.index() == endParentIndex || startParentIndex == firstParent.index()){
                var childNodeLength = firstParent[0].childNodes.length
            }else{
                var childNodeLength = getNextNode(firstParent.next())[0].childNodes.length
        firstParent = getNextNode(firstParent.next())
        startIndex = secondStartIndex
        endChildIndex = 0
            }
      for(var i=0; i < childNodeLength; i++){
        if(endChildIndex >= endIndex) continue;
 
        var child = firstParent[0].childNodes[i]
        if(typeof child.classList != 'undefined' && child.classList.contains('rp_row_place')){
         endChildIndex++;
         if(endChildIndex >= startIndex){
           var free_place = $(child).find('.'+selectedClass)
           if(free_place.length > 0 && free_place[0].classList.contains(selectedClass)){
             free_place[0].classList.add(className)
                         arr.push(free_place.data('id'))
           }
         }
        }
      }
    }
  }
    if(event.ctrlKey){
        var endChildIndex = 0;
    endIndex = element.parent().index();
    endParentIndex = element.parent().parent().index();
        lastParent = element.parent().parent();
    for(startParentIndex; startParentIndex <= endParentIndex; startParentIndex++){
            if(firstParent.index() == endParentIndex || startParentIndex == firstParent.index()){
                var childNodeLength = firstParent[0].childNodes.length
            }else{
                var childNodeLength = getNextNode(firstParent.next())[0].childNodes.length
        firstParent = getNextNode(firstParent.next())
        startIndex = secondStartIndex
        endChildIndex = 0
            }
      for(var i=0; i < childNodeLength; i++){
        if(endChildIndex >= endIndex) continue;
 
        var child = firstParent[0].childNodes[i]
        if(typeof child.classList != 'undefined' && child.classList.contains('rp_row_place')){
         endChildIndex++;
         if(endChildIndex >= startIndex){
           var free_place = $(child).find('.'+selectedClass)
           if(free_place.length > 0 && free_place[0].classList.contains(selectedClass)){
             free_place[0].classList.remove(className)
                         arr.push(free_place.data('id'))
           }
         }
        }
      }
     }
    }
}
 
$(document).on('click','.rp_place_set_unavailable_places',function(event){
    setBlockPlace(event, $(this),'place_unavailable', 4, 'rp_place_set_unavailable_places');
})

да не лаконичный, но рабочий
(работает так, тыкаем на первое место зажимаем shift тыкаем на последнее место ряд выделяется, так же несколько рядов, несколько мест в ряду, при зажатии crtl так же блоками все снимается)

все хорошо, все работает НО! если добавить родителя к месту то уже ничего не работает, я знаю почему потому что все в скрипте считается от родителя.

Вопрос, можно сделать без привязки к родителю? или как то вообще по другому? Буду рад любой помощи или подсказке или наставлению)

Пример JSFiddle

Вот мои наработки, но выбирается только ряд весь, нельзя выбрать несколько рядов одновременно

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
var getNextNode = (prevNode) => {
  return prevNode.next()
}
 
var getElement = (element) =>{
  if(element.parent().index() > -1){
    return element.parent();
  }else{
    return getElement(element.parent())
  }
}
 
var getElementParent = (parentElement) => {
  if(parentElement.parent().index('.rp_row') > -1){
    return parentElement.parent()
  }else{
    return getElementParent(parentElement.parent())
  }
}
 
var getPlaceOnPart = (parentElement) => {
  var count = 0;
  var part = $(parentElement.find('.rp_table').get(0))
  part[0].childNodes.forEach(function(val){
    if(typeof val.classList != 'undefined' && val.classList.contains('rp_row_place')){
      count += 1;
    }
  })
  return count;
}
 
var setBlockPlace = (event, element, className, status, selectedClass) => {
    //Пустой массив для сбора всех Id
    arr = [];
  if (window.getSelection()) window.getSelection().removeAllRanges();
        else if (document.selection && document.selection.clear) document.selection.clear();
  if(!event.shiftKey && !event.ctrlKey){    
    element = getElement(element) 
    var count_part = element.parent().index()
    elementParent = getElementParent(element)   
    var count_place_part = getPlaceOnPart(elementParent)     
    startIndex = (count_part*count_place_part) - 1;
    startParentIndex = elementParent.index();
        firstParent = elementParent       
  }
      
  if(event.shiftKey){
    endChildIndex = 0;
    var count_part = element.parent().parent().index()
    var count_place_part = getPlaceOnPart(elementParent)
    element = getElement(element)
    elementParent = getElementParent(element)    
    endIndex = (count_part*count_place_part) - 1;
    endParentIndex = elementParent.index();    
        lastParent = elementParent;
     
    
    for(startParentIndex; startParentIndex <= endParentIndex; startParentIndex++){
            if(firstParent.index() == endParentIndex || startParentIndex == firstParent.index()){
                var childNodeLength = firstParent[0].childNodes.length
        var childPart = firstParent[0].childNodes;
            }else{
                var childNodeLength = getNextNode(firstParent.next())[0].childNodes.length
        var childPart = firstParent[0].childNodes;
        firstParent = getNextNode(firstParent.next())
        endChildIndex = 0
        console.log('refresh')
            }
      childPart.forEach(function(val, indx){
        if(typeof val.classList != 'undefined' && val.classList.contains('rp_table')){
          $.each($(val)[0].childNodes, function(item, items){
            if(typeof items.classList != 'undefined' && items.classList.contains('rp_row_place')){              
              if(endChildIndex <= endIndex){
                console.log(endChildIndex)
                endChildIndex++;
               if(endChildIndex >= startIndex){
                 var free_place = $(items).find('.'+selectedClass)
                 if(free_place.length > 0 && free_place[0].classList.contains(selectedClass)){
                   free_place[0].classList.add(className)
                   arr.push(free_place.data('id'))
                 }
               }
              }
            }
          })
        }
      })
    }
  }
}
 
$(document).on('click','.rp_place_set_unavailable_places',function(event){
    setBlockPlace(event, $(this),'place_unavailable', 4, 'rp_place_set_unavailable_places');
})

пример CodePen

@ExpertM · 21.01.2020, 10:06

Я немного подумал над решением, но безуспешно. Так что боюсь, что это нерешаемая задача, если даже Я не смог придумать решение, то остальные тем более не смогут.

@tezaurismosis · 21.01.2020, 19:39

ExpertM, а вы так хорошо знаете с ТСа? Может ещё лично знакомы?

@brain-4-me · 22.01.2020, 06:46 **[ТС]**

tezaurismosis,

Не по теме:

вы не поверите, он сидит на против и просто решил приколотся...

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@ExpertM 0 / 0 / 0 Регистрация: 20.01.2020 Сообщений: 1
	21.01.2020, 10:06
	Я немного подумал над решением, но безуспешно. Так что боюсь, что это нерешаемая задача, если даже Я не смог придумать решение, то остальные тем более не смогут. 0

@tezaurismosis Администратор 9674 / 4826 / 763 Регистрация: 17.04.2012 Сообщений: 9,664 Записей в блоге: 14
	21.01.2020, 19:39
	ExpertM, а вы так хорошо знаете с ТСа? Может ещё лично знакомы? 0

@brain-4-me 162 / 150 / 97 Регистрация: 24.12.2013 Сообщений: 744 Записей в блоге: 12
	22.01.2020, 06:46 [ТС]
	tezaurismosis, Не по теме: вы не поверите, он сидит на против и просто решил приколотся... 0