Заставить клип-путь работать с перетаскиваемым изображением - PullRequest
Новая
       43

Заставить клип-путь работать с перетаскиваемым изображением

0 голосов
/ 16 мая 2019

У меня есть элемент с пользовательской формой, нарисованный с помощью clip-path.При использовании атрибута html5 draggable путь к клипу на перетаскиваемом изображении игнорируется.Есть ли способ заставить клип-траекторию работать на изображении?Альтернативой использованию пути-клипа для простого (без хитрых ::before и ::after трюков) рисования пользовательских фигур, работающих на перетаскивании, также может быть принятый ответ.

( Осторожно, поддержка браузера ограничена)

#foo {
   padding: 0 1ch;
   clip-path: circle(50%);
   color: white;
   background: indianred;
}
<label id="foo" draggable="true">bar</label>

Для репликации запустите фрагмент, нажмите на панель и перетащите.Скриншот проблемы:

enter image description here

1 Ответ

1 голос
/ 16 мая 2019

Не видя больше вашего кода, трудно сказать, что не так, но вот пример рабочего перетаскиваемого элемента, использующего путь клипа. Я только что изменил код из w3schools, так что это не моя оригинальная работа. https://codepen.io/zenRyoku/pen/EzWmmP

//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
body {
  height: 100%
}

#mydiv {
  position: absolute;
  height: 100px;
  width: 100px;
  z-index: 9;
  background-color: plum;
  text-align: center;
  clip-path: circle();
  cursor: move;
}
<!DOCTYPE html>
<html>
  <body>
    <div id="mydiv"></div>
  </body>
</html>

Однако я сделал еще один пример, когда элементы перетаскивались в другой контейнер, а путь клипа исчезает при перетаскивании и возвращается при наведении мыши. Возможно, это повторяет вашу проблему? В этом случае это может быть связано с реализацией Javascript, как описано выше, или созданием SVG с нужной вам формой и использованием ее в качестве фона перетаскиваемого элемента. https://codepen.io/zenRyoku/pen/XwMgmM

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));
}
body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#drop {
  width: 200px;
  height: 200px;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #aaaaaa;
}

#drag1 {
  padding: 2rem;
  background: pink;
  clip-path: circle();
}

#drag2 {
  padding: 2rem;
  background: plum;
  clip-path: circle();
}
<!DOCTYPE HTML>
<html>
  <body onload="makeDraggable(evt)">
    <div class="container">
      <div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <label id="drag1" draggable="true" ondragstart="drag(event)"></label>
      <div id="drag2" draggable="true" ondragstart="drag(event)"></div>
    </div>
  </body>
</html>
...