1

Не могу придумать как получить элемент над которым произойдет действие 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>
3
  • 1
    Вот пример: jsfiddle.net/PELDF/1 1 ноя 2018 в 15:17
  • Jquery сразу мимо, самый бесполезный фрейм, только ajax запросы от него использую. Есть варианты на vanila js? 1 ноя 2018 в 15:46
  • @ViacheslavSoldatov, мало того, что ты используешь одинаковые id, так там ещё невозможная нагрузка, если элементов много. Никакой динамики не присутствует. Это ужасный пример, который бы я не советовал никому использовать. 15 июн 2019 в 17:45

1 ответ 1

0

https://learn.javascript.ru/coordinates

Достаешь координаты мыши при 'mousemove' или 'mouseup', смотря где именно тебе нужно отлавливать элемент снизу: const {clientX, clientY} = window.event;

А после пробрасываешь эти координаты: const bottomElement = document.elementFromPoint(clientX, clientY);

И получаешь элемент, который находится в данный момент под курсором. Это валидный вариант, как добиться правильной логики. Все динамично и просто. Хоть мне и поставили минус на предыдущий комментарий, но я еще раз напомню что не советую использовать пример из jsfiddle.net/PELDF/1, это полное дно. По меньше бы таких советов в интернете.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.