将一个 HTML 元素 (div) 放在另一个 (li) 上

Posted 2023-05-07

【中文标题】将一个 HTML 元素 (div) 放在另一个 (li) 上

【英文标题】：Placing one HTML element(div) over another(li)

【发布时间】：2018-08-29 14:34:05

【问题描述】：

我正在使用Gridster 和Interact。我基本上想在Interact 的帮助下在小部件上添加图像。现在我只是想放置 interact 小部件在 gridster 小部件上。但是当我尝试将 interact 小部件放在 gridster 小部件上时，它会低于 gridster 小部件.我希望 interact 小部件超过 gridster 小部件。我该怎么做

我已尝试使用 z-index，但它仍然无法按我想要的方式工作

我的 JS：

 // target elements with the "draggable" class
interact('.draggable')
  .draggable(
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: 
      restriction: "parent",
      endOnly: true,
      elementRect:  top: 0, left: 0, bottom: 1, right: 1 
    ,
    // enable autoScroll
    autoScroll: true,

    // call this function on every dragmove event
    onmove: dragMoveListener,
    // call this function on every dragend event
    onend: function (event) 
      var textEl = event.target.querySelector('p');

      textEl && (textEl.textContent =
        'moved a distance of '
        + (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
                     Math.pow(event.pageY - event.y0, 2) | 0))
            .toFixed(2) + 'px');
    
  );

  function dragMoveListener (event) 
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

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

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  

  // this is used later in the resizing and gesture demos
  window.dragMoveListener = dragMoveListener;

  /* The dragging code for '.draggable' from the demo above
 * applies to this demo as well so it doesn't have to be repeated. */

// enable draggables to be dropped into this
interact('.dropzone').dropzone(
  // only accept elements matching this CSS selector
  accept: '#yes-drop',
  // Require a 75% element overlap for a drop to be possible
  overlap: 0.75,

  // listen for drop related events:

  ondropactivate: function (event) 
    // add active dropzone feedback
    event.target.classList.add('drop-active');
  ,
  ondragenter: function (event) 
    var draggableElement = event.relatedTarget,
        dropzoneElement = event.target;

    // feedback the possibility of a drop
    dropzoneElement.classList.add('drop-target');
    draggableElement.classList.add('can-drop');
    draggableElement.textContent = 'Dragged in';
  ,
  ondragleave: function (event) 
    // remove the drop feedback style
    event.target.classList.remove('drop-target');
    event.relatedTarget.classList.remove('can-drop');
    event.relatedTarget.textContent = 'Dragged out';
  ,
  ondrop: function (event) 
    event.relatedTarget.textContent = 'Dropped';
  ,
  ondropdeactivate: function (event) 
    // remove active dropzone feedback
    event.target.classList.remove('drop-active');
    event.target.classList.remove('drop-target');
  
);

更新

根据myfunkyside给出的答案更新Fiddle

Fiddle

【问题讨论】：

如果问题需要更多澄清，请询问:)

【参考方案1】：

.drag-drop.can-drop需要添加这两条规则：

position:absolute; z-index:n;（n 比所有 Gridster-widgets 都高，比如9999）

【讨论】：

完美！！非常感谢:)

是否有可能一旦放置在 gridster 小部件中，当 gridster 小部件被移动时，它应该保持在 gridster 小部件的边界内。但是如果我将交互小部件移出 gridster 小部件，它就会出来

@NewBie 很抱歉长时间的沉默，我一直在努力让它工作很长一段时间，但我所有的努力似乎都被两个库相互对抗而卡住了。 这是我最后的努力之一：https://jsfiddle.net/jry7z2e8/18/，您可以将 URL 中的“18”更改为“19”到“21”（或更低）以查看其他版本。也许你可以让它工作，我想我做不到。

我真的很感激你付出的努力。不用担心延迟。至少你付出了你的努力，如果不给我整个解决方案，至少你会引导我朝着正确的方向前进

非常感谢 :)