Interact.js: element draggable underlying others elements

[loverdrive]

Hi. I have 3 draggable elements. I number them "Element1", "Element2" and "Element3" for semplicity in describing.
I start moving Elemen1. When i move it over Element2, it overlying Element2 (also Element3). Then, i move Element2. It overlying Element1 and Element2. After that, i start moving Element1 again, and now when i move Element1 over Element2, Element1 underlying Element2.

I'd like to have the current moving element overlying all others elements, in all situation.

Have you any idea how to achieve this?

Thank you!

[taye]

If the elements are all siblings and are the only children of the parent element (or are the last children) and the DOM order isn't important, then the easiest way would be to call event.target.parentNode.appendChild(event.target); in a dragstart listener.

You could also keep a counter variable and increase it every time a drag starts and set the CSS z-index of the target to that counter value. That way the most recently dragged element always has the highest z-index.

[loverdrive]

I tried with

elementID = event.target.id
zindexValue = zindexValue + 1;  
document.getElementById(elementID).style.zIndex = zindexValue;
console.log('zindex elemento: '+document.getElementById(elementID).style.zIndex);

Console log tell me the zindex of each elements is incremental, and it is ok. But problem with underlying elements persist.

I tried also with a single class (toggle it) that should overlying:

.overlying {
    z-index: 9000;
}

var previousMoved;
[...]
onstart: function (event) {
            elementID = event.target.id


            // Change Focus of draggable element (to have always the current draggable overlaying others)
            if (previousMoved) {
                previousMoved.removeClass="overlying"; // sets last moved element to original zindex
            }
            elementID.addClass="overlying";  // sets current moving element to hight zindex
            previousMoved = elementID;  // sets current element as next previous

but problem is not solved.

Seems like zindex value is not consider

[taye]

Perhaps the z-index that is set in the elements style is being replaced because of an !important rule elsewhere. Otherwise, I don't know what could be wrong.

[taye]

Did you find a working solution?

[loverdrive]

No, i don't find a working solution. I inspect element (with developer tools of firefox/chrome) and i not found any !important rule. Also search !important in the project files, give me no results.

[loverdrive]

To have a working demo, i see that the problem is present (for me, i'm using firefox 39.0.3 now) also in the interactjs demo page: http://interactjs.io/

In the first two examples, the first draggable element is always underlying the second one. ("you can drag one element" is underlyng "with each pointer". Also, #no-drop is underlying #yes-drop in the second example

[stbaer]

@loverdrive - have you tried setting a position value for the draggable elements (e.g. position: relative) in addition to the z-index?

[okobloko]

The problem with z-index is that the css attribute "position" needs to be "absolute" or "relative". If you just set the position of the elements to be dragged as "absolute" it will break interactjs.... you must ALSO set the _parent_ of the draggable items to position:relative for that to work. You can then use a hack (or please, something more elegant and generic than) this to switch the z-index property appropriately :
interact('.draggable').on('down',function (event){ if (event.target.id == 'drag-1'){ event.target.style.zIndex = 2; document.getElementById('drag-2').style.zIndex = 1; } else { event.target.style.zIndex = 2; document.getElementById('drag-1').style.zIndex = 1; } });

Works.

[Thomas0c]

You could also do something along the lines of the following, which will keep you from having to store specific element IDs. Note: This requires that elements have been set to position: relative in a stylesheet.

// previousElement should be defined before initiating interact().
let previousElement;

.on('down', function(event) {
  if(previousElement) {
    previousElement.style.zIndex = 1;
  }
  event.target.style.zIndex = 9000;
})

.on('up', function(event) {
  previousElement = event.target;
})

[mcdemarco]

Is there a reason why this issue is closed? I don't think various statements about how it might be possible to hack around it in certain cases, if your draggables happen to be laid out in a particularly fixable way, constitute a fix--especially since it didn't solve the issue for @loverdrive, and the problem is easily reproduced on the project home page.

jQuery-UI draggable has a z-index option for this sort of issue; I don't know what the underlying implementation is, but it was working for me without any extra manipulation of the parent's or elements' positions. When I switched to interact.js, the problem came back.

(Edit:) I was able to solve it in my case by setting and unsetting (to "auto") target.style.zIndex in my draggable onmove and onend functions (which were based on the first example on the project home page), without changing the parent's position.

[taye]

Is there a reason why this issue is closed?

As I wrote in this article, _"What interact.js tries to do is present input data consistently across different browsers and devices and provide convenient ways to pretend that the user did something that they didn’t really do (snapping, inertia, etc.)."_

Z-axis ordering of elements is an application-specific concern and is out of the project's scope.

I don't think various statements about how it might be possible to hack around it in certain cases, if your draggables happen to be laid out in a particularly fixable way, constitute a fix

I don't consider this to be a problem with interact.js therefore there's nothing to fix. _"not modifying the DOM except to support IE8 and to change the cursor (but you can disable that)"_ is a feature that I don't plan on dropping.

jQuery-UI draggable has a z-index option for this sort of issue; I don't know what the underlying implementation is, but it was working for me without any extra manipulation of the parent's or elements' positions. When I switched to interact.js, the problem came back.

It's not my intention to do everything that jQuery UI's draggables do even if it makes the module less convenient in comparison.

[jaysalvat]

Hi,
I use getTime() to generate a greater zIndex than the previous one.

interact('.letter').draggable({
    onstart: function (event) {
        event.target.style.zIndex = parseInt(new Date().getTime() / 1000);
    }
});

Hope it helps.