JavaScript как получить элемент под элементом Drag N Drop

176
22 марта 2019, 08:00

Не могу придумать как получить элемент над которым произойдет действие onmouseup (то есть когда отпускаю перемещаемый элемент).

<div id="elements">
    <div class="drag">1</div>
    <div class="drag">2</div>
    <div class="drag">3</div>
</div>
<div class="drop">Переместить сюды</div>
<script>

    dragNdrop({
        dropElement: document.querySelector('.drop'),
        dragElement: '.drag'
    });
    //ФУНКЦИЯ DRAG N DROP
    function dragNdrop({
        dropElement: drop,//контейнер куда перемещать элементы document.querySelector('.drop'),
        dragElement: drag//класс перемещаемого элемента строка '.class'
    }){
    //объект для опций переноса
    var drag_option = {};
    //Получаем координаты объекта
    function getCoords(elem) { // кроме IE8-
      var box = elem.getBoundingClientRect();
      return {
      top: box.top + pageYOffset,
      left: box.left + pageXOffset
      };
    }//getCoords

        //действия при нажатии клавиши на элементе
        function onMouseDown(e){
            drag_option.elem = e.target.closest(drag);
            if(drag_option.elem){
                //записываем начальные координаты объекта
                drag_option.startY = getCoords(drag_option.elem).top;
                drag_option.startX = getCoords(drag_option.elem).left;
            }//if
        }//onMouseDown
        //Действие при перемещении объекта
        function onMouseMove(e){
            if(!drag_option.elem){
                return; 
            }
            drag_option.elem.style.position = 'absolute';
            drag_option.elem.style.top = e.pageY + 'px';
            drag_option.elem.style.left = e.pageX + 'px';

        }//onMouseMove
        //действия при отпускания элемента
        function onMouseUp(e){
            drag_option.elem.style.position = 'inherit';
            drag_option.elem.style.top  = drag_option.startY + 'px';
            drag_option.elem.style.left  = drag_option.startX + 'px';
            drag_option = {};
        }//onMouseUp
        document.onmousedown = onMouseDown;
        document.onmousemove = onMouseMove;
        document.onmouseup = onMouseUp;
        return false;
    }//dragNdrop
</script>
<style>
    .computer-smile{
        border: 3px solid red !important;   
    }
    #elements{
        padding: 20px;
        border: 1px solid green;
        width: 760px;
        height: auto;       
    }
    .drag{
        cursor:pointer;
        background-color: green;
        margin-bottom: 10px;    
        display: inline-block;
        color: white;
        padding: 20px;
        font-weight: bold;
    }
    .drop{
        border: 1px solid green;
        width: 800px;
        height: 500px;  
    }
</style>
READ ALSO
Получение сырых данных Audio в js

Получение сырых данных Audio в js

Допустим есть некий sampemp3

175
Архитектура БД для хранения остатков

Архитектура БД для хранения остатков

Всем приветЕсть БД с таблицами:

160
Обновление primary key при обновлении записи MySQL

Обновление primary key при обновлении записи MySQL

Возможно ли выполнить запрос который обновит не только данные в записи таблицы, но и uid(primary key) записи на новый(последний) без риска получить...

149