Как я могу выключить ма gnet? - PullRequest
Новая
       5

Как я могу выключить ма gnet?

0 голосов
/ 09 марта 2020

Я перетаскиваю элемент к целевой области. Целевая область действует как ма gnet и «привязывает» элемент к области, когда элемент находится достаточно близко. После привязки к области элемент «захватывается» целевой областью. , , и НЕ может быть вытащен без отскока назад.

Как я могу "выключить" ма gnet и перетащить элемент из целевой области в любом направлении?

Drag towards and snap into

const fill = document.querySelector('.fill');
const empties = document.querySelectorAll('.empty');
const container = document.querySelector('.container');

// Fill listeners
fill.addEventListener('dragstart', dragStart);
fill.addEventListener('dragend', dragEnd);

// Loop through empty boxes and add listeners
for (const empty of empties) {
  empty.addEventListener('dragover', dragOver);
  empty.addEventListener('dragenter', dragEnter);
  empty.addEventListener('dragleave', dragLeave);
  empty.addEventListener('drop', dragDrop);
}

// Drag Functions

function dragStart() {
  this.className += ' hold';
  setTimeout(() => (this.className = 'invisible'), 0);
}

function dragEnd() {
  this.className = 'fill';
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
  this.className += ' hovered';
}

function dragLeave() {
  this.className = 'empty';
}

function dragDrop() {
  this.className = 'empty';
  this.append(fill);
}
body {
  background: rgb(178, 187, 236);
}

.container {
  height: 500px;
  width: 100vw;
  position: relative;
}

.fill {
  display: inline-block;
  background-color: black;
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  cursor: pointer;
}

.hold {
  border: solid 5px #ccc;
  clip-path: circle();
}

.empty {
  display: inline-block;
  position: relative;
  height: 160px;
  width: 160px;
  left: 500px;
  top: 100px;
  margin: 10px;
  border-radius: 50%;
  border: solid 3px salmon;
  background: white;
}

.hovered {
  background: #f4f4f4;
  border-style: dashed;
}

.invisible {
  display: none;
}
<div class="container">
      <div class="empty"></div>
      <div class="fill" draggable="true"></div>
</div>
<!--DRAG THE BLACK CIRCLE TOWARDS THE WHITE TARGET AREA-->
<!--THEN DRAG OUT OF THE TARGET AREA-->
...