Перетащите изображение и поместите поверх элемента SVG - PullRequest
Новая
       0

Перетащите изображение и поместите поверх элемента SVG

0 голосов
/ 10 декабря 2018

Я создал два круга, используя SVG и изображение.Я пытаюсь перетащить изображение в круги, и хотя я могу сделать это после удаления изображения, оно не видно.Как я могу бросить его поверх кругов. 

<!DOCTYPE html>
<html>
<body>
<div id="circle" >
<svg id="dest" ondrop="drop(event)" ondragover="allowDrop(event)" width="250" height="100">
<circle id="yelcirc" cx="50" cy="50" r="50" fill="yellow" />
<circle id="greencirc" cx="160" cy="50" r="50" fill="green" />
</svg>
</div>
<img id="draglogo" src="logo.gif" draggable="true" ondragstart="drag(event)" class="draggable"  ondragend="" width="105" height="73">
</body>
<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>
</html>

1 Ответ

0 голосов
/ 10 декабря 2018

Очевидно, что ondrop и ondragover события не обнаружены в вашем теге svg.Кроме того, изображения в SVG не имеют того же синтаксиса, что и в обычном HTML.

Это простой пример того, как вы можете достичь основ того, что вы хотите сделать, конечно, есть некоторыекорректирующие действия, положение изображения, его размер и т. д. Итак, в основном я делаю получение исходных атрибутов изображения для создания изображения SVG.Вы также можете разместить обычное изображение вне тега SVG, но я не уверен, что его будет легче позиционировать и тому подобное.

Вы также можете прочитать этот ответ об эмуляциисобытия перетаскивания на SVG-элементах

ПРИМЕЧАНИЕ: это работает только для первого перетаскивания, даже если изображение после перетаскивания выглядит перетаскиваемым, функция выдаст ошибку из-за выбора img из DOM, он был удален, поэтому тег img больше не найден. 

<!DOCTYPE html>
<html>
<body>
<div id="circle" ondrop="drop(event)" ondragover="allowDrop(event)" >
<svg id="dest" width="250" height="100">
<circle id="yelcirc" cx="50" cy="50" r="50" fill="yellow"  />
<circle id="greencirc" cx="160" cy="50" r="50" fill="green" />
</svg>
</div>
<img id="draglogo" src="https://placeimg.com/105/73/any" draggable="true" ondragstart="drag(event)" class="draggable"  ondragend="" width="105" height="73">
</body>
<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"),
             img = document.getElementById(data),
             imgSrc = img.getAttribute('src'),
             imgW = img.getAttribute('width'),
             imgH = img.getAttribute('height'),
             //for example you can calculate X position from event circle
             imgX = ev.target.getAttribute('cx') - ev.target.getAttribute('r');

         ev.target.parentElement.innerHTML += '<image xlink:href="' + imgSrc + '" x="' + imgX + '" y="0" width="' + imgW + 'px" height="' + imgH + 'px"/>';
         img.parentNode.removeChild(img);
    }
</script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...