31.01.2016, 13:56
|
 |
Профессор
|
|
Регистрация: 18.05.2011
Сообщений: 1,207
|
|
Сообщение от Teamur
|
|
Самое сложное, как я считаю, будет реализовать визуализацию следования выделения за курсором
|
Тут можно завязать на свойство relatedTarget или toElement для ie. Было бы желание  |
|
31.01.2016, 14:06
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
|
destus,
На данном этапе ie обходим стороной. EDGE - не имею ничего против )
|
|
31.01.2016, 14:20
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
рони,
5-7 строк. Увы не смогу осилить. math.min() вижу первый раз. Плюс ко всему, я вообще поразился тому, как вам удается так сокращать код. Уменя работают только простейшие скрипты, такие как добавить/удалить класс; добавить обработчики, изменить стили, вывести алерт в конце концов 
А при попытке усложнить, добавить функционал - все катится к чертям.
А когда есть хоть какой-то работающий прототип, появляется и мотивация. На данный момент я изучаю совр. учебник JavaScript Кантора. Поэтому прошу вас, не только предложить решение, но и объяснить принцип действия.
Вот здесь выделение следует за курсором после клика, но код уж больно громоздкий.
https://jsfiddle.net/e5cbuoxf/7/
Последний раз редактировалось Teamur, 31.01.2016 в 14:24.
|
|
31.01.2016, 14:30
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Teamur
|
|
ВИДИМ процесс выделения (синяя область)
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
display: flex;
margin: 0;
height: 100vh;
background: #56bddc;
}
#box {
display: flex;
margin: auto;
box-shadow: 0 0 5px hsla(0, 0%, 0%, .25);
}
.el {
width: 60px;
line-height: 60px;
font-family: consolas;
font-size: 30px;
text-align: center;
cursor: pointer;
background: #fff;
-webkit-user-select: none;
user-select: none;
-moz-user-select: none;
}
.el:hover { background: #fece9a; }
.mark { background: #fece9a; }
.blue, .blue:hover{
background: #0000FF;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function d(b, c, d) {
[].forEach.call(a, function(e, a) {
(a >= c && a <= d || void 0 === c) && e.classList[void 0 === c ? "remove" : "add"](b)
})
}
var a = document.querySelectorAll(".el"),
b = void 0;
[].forEach.call(a, function(a, c) {
a.addEventListener("mouseover", function() {
if (void 0 !== b) {
var a = Math.min(c, b),
e = Math.max(c, b);
d("blue");
d("blue", a, e)
}
});
a.addEventListener("click", function() {
if (void 0 === b) b = c, d("mark"), d("blue", b, b);
else {
var a = Math.min(c, b),
e = Math.max(c, b);
b = void 0;
d("blue");
d("mark", a, e)
}
})
})
});
</script>
</head>
<body>
<div id='box'>
<div class='el'>1</div>
<div class='el'>2</div>
<div class='el'>3</div>
<div class='el'>4</div>
<div class='el'>5</div>
<div class='el'>6</div>
<div class='el'>7</div>
<div class='el'>8</div>
<div class='el'>9</div>
<div class='el'>X</div>
</div>
</body>
</html>
|
|
31.01.2016, 14:33
|
 |
Профессор
|
|
Регистрация: 15.07.2015
Сообщений: 511
|
|
Если хочется ES6, то
как говорит рони, для медитации 
Symbol.iterator
и nextElementSibling.
p.s я вариант добавлял, но потом удалил, ибо было лень доводить до ума=) |
|
31.01.2016, 14:46
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
|
Lemme, Но позволит ли это сократить код? )
Блин, мне больше ничего не надо. Давайте добьем эту тему. Конечно кто я такой, всего лишь Teamur. Думаю тема вполне интересна - ВЫДЕЛЕНИЕ ДИАПАЗОНА (не в обиду другим темам). Медитация тоже не помешает. Наше дело правое и тд, за Родину!
Я просто минималист и перфекционист. Так уж вышло. Поэтому не успокоюсь пока не получу компактное и быстрое!
Да сейчас я мало что умею делать на JavaScript. Но не могу бросить. Надо сделать! Если что-то смогу сочинить я здесь выложу. Буду держать тему на плаву. Какие еще варианты будут? )))))))
|
|
31.01.2016, 14:52
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
|
рони,
я благодарен вам, за внимание к теме. Спасибо. замечательное решение.
Есть ли еще варианты. Хочу увидеть максимальное количество решений. Даже если посмотреть все мои темы можно заметить, что все они сводятся к одному - выделение интервала. Хоть я пока слаб в Javascript, я стремлюсь максимально четко сформулировать задачу, выкладываю фрагменты кода, которые можно использовать, но со сборкой этих фрагментов в единое целое у меня проблема. Спасибо
|
|
31.01.2016, 15:04
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Teamur,
сейчас код 30 строк можно сократить строк на 10 ... но всё уже пас ... и лучше наоборот добавить эти 10 с недостающим сейчас функционалом.
|
|
31.01.2016, 15:12
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
|
рони,
Если кликнуть первый раз,
отвести курсор и не нажимать второй раз,
а затем спустить курсор за контейнер #box,
мы увидим синюю область.
Как сделать так, чтобы при покидании #box, синим остался только тот элемент, на котором был совершен первый клик.
А при возвращении курсора, все работало бы как до покидания контейнера = выделение двигается за курсором.
Последний раз редактировалось Teamur, 31.01.2016 в 15:15.
|
|
31.01.2016, 15:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Teamur
|
|
Как сделать так, чтобы при покидании #box, синим остался только тот элемент, на котором был совершен первый клик.
|
|
Сообщение от рони
|
|
и лучше наоборот добавить эти 10 с недостающим сейчас функционалом.
|
пишите код ... пока плюшки для вас закончилсь, не ждите, пишите сами. |
|
|
|
