Урок 7. Перетаскивание и всплывающие подсказки

Светофор

МЕТОДЫ,  АТРИБУТЫ и СОБЫТИЯ

preventDefault() метод,  отменяет это событие, если оно отменяемое, а это означает, что действие по умолчанию, которое принадлежит к событию, не произойдет.

Например, это может быть полезно, когда:

• При нажатии на кнопку «Отправить», не допустить его отправки формы
• При нажатии на ссылку, предотвратить ссылку от следования URL

dataTransfer.setData () Метод, задает тип данных и значение перетаскиваемом данных.

ondragstart атрибут вызывает функцию перетаскивания (событие), которое определяет, какие данные тащиться.

AppendChild () Метод, добавляет узел в качестве последнего дочернего узла.

getElementById () Метод, возвращает элемент, который имеет атрибут ID с указанным значением.

Этот метод является одним из наиболее распространенных методов в HTML DOM, и используется почти каждый раз, когда вы хотите управлять, или получить информацию из, элемента на документе.

Возвращает NULL , если никакие элементы с указанным идентификатором не существует.

ID должно быть уникальным в пределах страницы. Тем не менее, если существует более одного элемента с указанным идентификатором, метод getElementById () возвращает первый элемент в исходном коде.

OnDrop Событие происходит, когда перетаскиваемый элемент или текст выбор падает на цель перетаскивания.

Перетаскивание является очень распространенной особенностью в HTML5. Это когда вы «захватываете» объект и перетащить его в другое место.

OnDragOver Событие происходит, когда перетаскиваемый элемент или выделение текста перетаскивается над целевым объектом перетаскивания.

По умолчанию данные / элементы могут не быть удалены в других элементах. Чтобы разрешить падение, мы должны предотвратить обработку по умолчанию элемента. Это делается путем вызова метода event.preventDefault () для события OnDragOver.

Draggable — для того, чтобы сделать элемент перетаскиваемым, установите перетаскиваемым элементам атрибут со значением истина.

OnMouseOver Событие, происходит, когда указатель мыши перемещается на элемент, или на одного из своих детей.

onmouseout Событие, происходит, когда указатель мыши перемещается из элемента, или из одного из своих детей.

relatedTarget Свойство, возвращает элемент, связанный с элементом, вызвавшего событие мыши.

Свойство relatedTargert можно использовать с событием наведения мыши, чтобы указать элемент с которого курсор только что вышел, или с событием MouseOut для указания элемента курсора только что навведенного.

Примечание: Это свойство только для чтения.

КОД

Html

<p>Перетащите цвета так чтоб получился светофор:</p>

<div id="div1" style="border-radius: 20px 20px 0 0;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="text1">Красный</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="text2">Желтый</div>
<div id="div3" style="border-radius: 0 0 20px 20px;" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="text3">Зеленый</div>

<img id="drag1" src="1.png" draggable="true" ondragstart="drag(event)">
<img id="drag2" src="2.png" draggable="true" ondragstart="drag(event)">
<img id="drag3" src="3.png" draggable="true" ondragstart="drag(event)">

Style

#div1 {    
  width: 100px;
    height: 100px;
    padding: 10px;
    margin: 5px;
    border: 1px solid #aaaaaa;
    background: #000;
}
#div2 {    
  width: 100px;
    height: 100px;
    padding: 10px;
    margin: 5px;
    border: 1px solid #aaaaaa;
    background: #000;
}
#div3 {    
  width: 100px;
    height: 100px;
    padding: 10px;
    margin: 5px;
    border: 1px solid #aaaaaa;
    background: #000;
}

#text1 {
  color: #fff;
    display: none;
    background-image: url("6.png");
    position: absolute;
    margin-top: -115px;
    margin-left: 150px;
    width: 100px;
    height: 65px;
    text-align: center;
    padding-top: 25px;
}

#text2 {
  color: #fff;
    display: none;
    background-image: url("7.png");
    position: absolute;
    margin-top: -115px;
    margin-left: 150px;
    width: 100px;
    height: 65px;
    text-align: center;
    padding-top: 25px;
}

#text3 {
  color: #fff;
    display: none;
    background-image: url("8.png");
    position: absolute;
    margin-top: -115px;
    margin-left: 150px;
    width: 100px;
    height: 65px;
    text-align: center;
    padding-top: 25px;
}

Script для перетаскивания

<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

Script для всплывающих подсказок

<script>
    var catlink     = document.getElementById("div1"),
    catlink1     = document.getElementById("div2"),
    catlink2     = document.getElementById("div3"),
        catblock    = document.getElementById("text1"),
    catblock1    = document.getElementById("text2");
    catblock2    = document.getElementById("text3");
 
    catlink.onmouseover = function(){
        catblock.style.display="block";
    
    };
  catlink1.onmouseover = function(){
        catblock1.style.display="block";
    
    };
  catlink2.onmouseover = function(){
        catblock2.style.display="block";
    
    };
    catblock.onmouseout = function(e){
        var evt = e||window.event,
            rel = evt.relatedTarget || evt.toElement;
        if (rel.id !== "div1") {
            catblock.style.display="none";
        }
    };
  catblock1.onmouseout = function(e){
        var evt = e||window.event,
            rel = evt.relatedTarget || evt.toElement;
        if (rel.id !== "div2") {
            catblock1.style.display="none";
        }
    };
  catblock2.onmouseout = function(e){
        var evt = e||window.event,
            rel = evt.relatedTarget || evt.toElement;
        if (rel.id !== "div3") {
            catblock2.style.display="none";
        }
    };
</script>

КАРТИНКИ