Перетаскивание исчезает при перетаскивании за пределы своего основного контейнера

Question

Перетаскивание исчезает при перетаскивании за пределы своего основного контейнера

1

Я делаю итальянский учебный веб-сайт, но у меня возникают трудности с перетаскиванием флеш-карт из их контейнера, поскольку он исчезает. Веб-сайт можно просмотреть на страницах github и в коде, отображаемом в github. Кто-нибудь подскажет, что делать?

interact('.flash-card').draggable({
  restrict: {
    restriction: '#main',
  },
  onmove: (event) => {
    const target = event.target;
    const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
    const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    target.style.webkitTransform = 'translate(' + x + 'px, ' + y + 'px)';
    target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }
});

interact('#main').dropzone({
  accept: '.flash-card',
  overlap: 0.6
});

BreakTruth 06 нояб. 2017, в 14:38

Источник

1

они не исчезают, они «проталкивают» размеры своего контейнера (см. полосы прокрутки). Вероятно, вам нужно исправить CSS контейнера
Kaddath 06 нояб. 2017, в 13:14
1

Для дальнейшего использования было бы неплохо скопировать (соответствующий) код в своем сообщении, чтобы каждый мог проверить его, а не переходить на другой сайт.
Jan_V 06 нояб. 2017, в 13:17
0

@Kaddath Я сказал, что перетаскивание, не то, что переполняет контейнеры.
crowlKats 06 нояб. 2017, в 13:40
0

они не исчезают, когда вы пытаетесь перетащить их из контейнера, они «выдвигают» размеры своего контейнера (см. полосы прокрутки). Вероятно, вам нужно исправить CSS контейнера, иначе будет сложно определить момент, когда вы пересечете границы, и дополнительно вытащите из него элемент, как указано в ответе Аарона. Понятнее, как это?
Kaddath 06 нояб. 2017, в 13:46

Показать ещё 2 комментария

Теги:

javascript

interact.js

1 ответ

Ещё вопросы

они не исчезают, они «проталкивают» размеры своего контейнера (см. полосы прокрутки). Вероятно, вам нужно исправить CSS контейнера
Для дальнейшего использования было бы неплохо скопировать (соответствующий) код в своем сообщении, чтобы каждый мог проверить его, а не переходить на другой сайт.
@Kaddath Я сказал, что перетаскивание, не то, что переполняет контейнеры.
они не исчезают, когда вы пытаетесь перетащить их из контейнера, они «выдвигают» размеры своего контейнера (см. полосы прокрутки). Вероятно, вам нужно исправить CSS контейнера, иначе будет сложно определить момент, когда вы пересечете границы, и дополнительно вытащите из него элемент, как указано в ответе Аарона. Понятнее, как это?

Aaron Digulla · Answer 1 · 2017-11-06T11-57-00.000Z

Элементы HTML имеют строгие отношения между родителями и дочерними элементами. A (нормальный) ребенок никогда не будет виден вне его родителя. Эффект, который вы видите, просто обрезается. То же самое происходит, когда вы помещаете изображение 500x500 в 10x10 DIV.

Чтобы достичь желаемого эффекта, вы должны превратить ребенка в какую-то форму элемента "верхнего уровня". Существует несколько способов сделать это, самое простое - установить absolute. Другим было бы сделать его дочерним элементом body (или скрыть элемент и создать клон, который является дочерним body).

Если вы используете абсолютные позиции, вам нужно понять две вещи: положение ребенка (обычно 0/0) теперь "относительное" для того, что имеет position не равную static (по умолчанию). Это означает, что он прыгнет. Чтобы исправить это, добавьте верхнюю/левую часть старого родителя. См. Https://developer.mozilla.org/en-US/docs/Web/CSS/All_About_The_Containing_Block

Кроме того, элемент не будет использовать пространство в вашем макете. Это означает: когда у него есть братья и сестры, они будут двигаться.

См. Также: https://developer.mozilla.org/en-US/docs/Web/CSS/position