JS - включить эффект элемента-призрака с помощью метода protectDefault - PullRequest
Новая
       19

JS - включить эффект элемента-призрака с помощью метода protectDefault

0 голосов
/ 19 ноября 2018

Я пытаюсь реализовать операцию, я хочу перетащить элемент из списка img тегов в различные svg:rect контейнеры.

Использование mousedown и mouseup достаточно для понимания, какиеimg выбирается из списка и в котором svg:rect удаляется.

Код следующий: 

<body>

<div style="border: 1px solid black">
    <svg width="300" height="100">
        <rect id="container" width="60" height="60"></rect>
        <rect id="container2" x="70" width="60" height="60"  fill="salmon"></rect>
    </svg>
</div>

<div id="list">
    <img id="item" src="img/cat.png" width="64" />
</div>

<script>

    const container = document.getElementById('container');
    const container2 = document.getElementById('container2');
    const item = document.getElementById('item');

    let drag = null

    item.addEventListener('mousedown', function (e) {
        e.preventDefault();
        console.log('mouse down from IMG');
        drag = e.target;
    });

    container.addEventListener('mouseup', function (e) {
        e.preventDefault();
        console.log('Container 1', drag);
        drag = null;
    });

    container2.addEventListener('mouseup', function (e) {
        e.preventDefault();
        console.log('Container 2', drag);
        drag = null;
    });
</script>

Моя проблема в том, что с e.preventDefault() в прослушивателе событий img Я потерял эффект элемента-призрака при перетаскивании пользователем img.

Как включить это и использовать preventDefault() call?

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

После некоторых поисков и тестов я нашел два возможных решения:

Первое решение : вообще не использовать перетаскивание html5.

Вместо этого используйте mousedown, примененный к элементу перетаскивания, и mouseup, примененный к элементу перетаскивания.В случае mousedown требуется вызов preventDefault().Это удалит эффект элемента-призрака при перетаскивании пользователя.Чтобы восстановить этот эффект, вам нужно создать свой собственный элемент-призрак со свойствами css pointer-events: none и position: absolute.

Второе решение : использовать функцию перетаскивания html5 частично.

Установите событие dragstart на элементе перетаскивания (img) и drop и dragover на элементе перетаскивания (svg).Отметьте e.target в событии drop, и у вас есть ссылка на ваш элемент svg:rect.

Пример здесь: https://gist.github.com/EduBic/49e36485c70c5a6d15df7db1861333de

NB не забудьтедобавить другое событие и управлять другими делами.

0 голосов
/ 19 ноября 2018

Эффект призрачного элемента происходит из свойства draggable по умолчанию <img>

Использование ondragstart на изображении и ondrop на другом элементе будет идеальным.См. , который иллюстрирует .

К сожалению, он не поддерживается на rect элементах.Вы можете что-то сделать с событием onmouseover для элементов rect, но пользователю потребуется переместить мышь после нажатия, чтобы она заработала. 

const container = document.getElementById('container');
const container2 = document.getElementById('container2');
const item = document.getElementById('item');

    let drag = null

function dragImg (e) {
        //e.preventDefault();
        console.log('ondrag IMG');
        drag = e.target;
    };

// Not working
function ondrop1 (e) {
        //e.preventDefault();
        console.log('Container 1', drag);
        drag = null;
    };

// Not working
function ondrop2 (e) {
        //e.preventDefault();
        console.log('Container 2', drag);
        drag = null;
    };
<div style="border: 1px solid black">
    <svg width="300" height="100">
        <rect id="container" onmouseover="ondrop1(event)" width="60" height="60"></rect>
        <rect id="container2" onmouseover="ondrop2(event)" x="70" width="60" height="60"  fill="salmon"></rect>
    </svg>
</div>

<div id="list">
    <img ondragstart="dragImg(event)" id="item" src="https://ddragon.leagueoflegends.com/cdn/8.22.1/img/champion/Velkoz.png" width="64" />
</div>

[РЕДАКТИРОВАТЬ] Если вы хотите продолжать использовать элементы rect с идеальным решением, вам нужно будет использовать ondrop в svg, и вы найдетеrect элемент под event.target см. документацию здесь .

Удачи!

...