Placing one HTML element(div) over another(li)

Question

I am using Gridster along with Interact.I basically want to add images on the widgets with the help of Interact.For now I am just trying to place the interact widget on the gridster widget.But when I try to place the interact widget over gridster widget it goes below gridster widget.I want interact widget to be over gridster widget.How can I do that

I have tried with z-index but its still not working the way I want

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

Update

The Updated Fiddle according to answer given by myfunkyside

Fiddle

If the question needs more clarification please ask :) – NewBie Mar 20 '18 at 19:47 — NewBie, Mar 20 '18 at 19:47

myfunkyside · Accepted Answer · 2018-03-21T01:21:11.277

2

You need to add these two rules for .drag-drop.can-drop:

position:absolute;
z-index:n; (with n being a higher number than all the Gridster-widgets, say 9999)

edited Mar 21 '18 at 01:21

answered Mar 20 '18 at 19:51

myfunkyside

3,890
1
17
32

Perfect !! Thanks So much :) – NewBie Mar 20 '18 at 19:55
Is it possible that once placed in gridster widget it should remain within the boundaries of gridster widget when the gridster widget is moved.But if I move the interact widget out of the gridster widget it will come out – NewBie Mar 20 '18 at 20:11
1

@NewBie sorry for the long silence, I've been trying to get this to work for quite some time, but all my efforts seem to get stuck by the two libraries working against each other. **This is one of my last efforts: [https://jsfiddle.net/jry7z2e8/18/](https://jsfiddle.net/jry7z2e8/18/)**, you can change the "18" in the URL to "19" up to "21" (or lower obviously) to check out some other versions. Maybe you can get it working, I don't think I'm able to. – myfunkyside Apr 04 '18 at 20:46
1

I really appreciate the effort that you have put into.And no worries over the delay.Atleast you have dedicated your efforts which will guide me in right direction atleast if not give me the entire solution – NewBie Apr 05 '18 at 09:09
1

Thank you so much for it :) – NewBie Apr 05 '18 at 09:10

Placing one HTML element(div) over another(li)

1 Answers1