Событие перетаскивания, которое имеет два разных значения в зависимости от того, куда его бросить - PullRequest
Новая
       56

Событие перетаскивания, которое имеет два разных значения в зависимости от того, куда его бросить

1 голос
/ 05 мая 2020

Я ищу способ представить, что событие перетаскивания имеет два разных значения в зависимости от того, куда бросить элемент. Моя цель - создать иллюстрированный словарь, как на этом изображении:

schematics of my goal

Когда элемент (текст) в правом столбце перетаскивается в правый столбец, элемент сортируется с помощью Sortable.JS; в то время как при размещении в левом столбце элемент не подлежит сортировке. JS только для того, чтобы быть на изображении.

Функции, которые должны иметь столбцы:

  • Левый столбец: Несортированные и отбрасываемые (то есть изображения не могут быть отсортированы, но текст можно отбрасывать на изображении.)
  • Правый столбец: тексты можно сортировать.
  • Каждый столбец имеет одну независимую полосу прокрутки.

На основе примера кода с использованием Sortable. JS, у меня может быть код, который позволяет перетаскивать между левым и правым столбцами, каждый столбец имеет одну независимую полосу прокрутки.

Затем я нашел другой пример кода для добавления перетаскиваемого текста на изображение в JavaScript, а затем я перенес его в предыдущий код и написал следующий код.

Однако левый столбец нельзя остановить. Помогите, пожалуйста.

Мой код: 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    </head>
    <body>
        <div class="container">
            <div id="shared-lists" class="row">
                <div id="column-left" class="filtered" style="width:200px;height:300px;overflow:auto;">
                    <div ><img src="./assets/fish.png"></div>
                    <div ><img src="./assets/car.png"></div>
                    <div ><img src="./assets/apple.png"></div>
                    <div ><img src="./assets/umbrella.png"></div>
                </div>

                <div id="column-right" class="list-group col" style="width:100px;height:180px;overflow:auto;">
                    <div class="list-group-item tinted">umbrella</div>
                    <div class="list-group-item tinted">apple</div>
                    <div class="list-group-item tinted">car</div>
                    <div class="list-group-item tinted">school</div>
                    <div class="list-group-item tinted">fish</div>
                    <div class="list-group-item tinted">pen</div>
                    <div class="list-group-item tinted">flower</div>
                </div>
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>

        <script>
            var columnRight = document.getElementById('column-right');
            new Sortable(columnRight, {
                group: 'shared',
                animation: 100,
            });

            var selected = null, // Object of the element to be moved
            x_pos = 0,
            y_pos = 0, // Stores x & y coordinates of the mouse pointer
            x_elem = 0,
            y_elem = 0; // Stores top, left values (edge) of the element

            // Will be called when user starts dragging an element
            function _drag_init(elem) {
                // Store the object of the element which needs to be moved
                selected = elem;
                x_elem = x_pos - selected.offsetLeft;
                y_elem = y_pos - selected.offsetTop;
            }

            // Will be called when user dragging an element
            function _move_elem(e) {
                x_pos = document.all ? window.event.clientX : e.pageX;
                y_pos = document.all ? window.event.clientY : e.pageY;

                if (selected !== null) {
                    selected.screenX = (x_pos - x_elem) + 'px';
                    selected.screenY = (y_pos - y_elem) + 'px';
                }
            }

            // Destroy the object when we are done
            function _destroy() {
                selected = null;
            }

            // Bind the functions...
            document.onmousedown = _drag_init;
            document.onmousemove = _move_elem;
            document.onmouseup = _destroy;
        </script>
    </body>
</html>
...