Question

我正在建立一个意大利语学习网站，但是我很难将闪存卡从容器中拖出来，因为它消失了。该网站可在github pages上查看，代码可在github上查看。任何人都知道该做什么？

＆＃13;

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
});

＆＃13;

Answer 1

HTML元素具有严格的父子关系。（正常）孩子永远不会在其父母之外可见。你所看到的效果就是剪裁。将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

拖动到其基础容器外部时拖动消失

1 个答案: