jquery touch punch z index has no impact

Question

I am working on ipad drag and drop and i tried to make the draggable element visible on every other div but it works only in parent div, my code is:

$('#draggable').draggable({
  zIndex: 20,
  drag: function(event){...},
  helper: 'clone',
  position: 'absolute',
  owerflow: 'hidden'
})

the html code looks like something like this:

<tr>
  <td>
    <div id="draggable"></div>
  </td>
  <td>
    <div id="dropDiv"></div>
  </td>
</tr>

When i am dragging the element its visible in the first td where it normally is, but when i try to drag it over the <div id="dropDiv"></div> it goes under the "dropDiv".

These divs and tds have multiple css classes which i cant display here.

I have already tried multiple z indexes but made no impact.

Answer 1

You can add custom helper like this:

$('#draggable').draggable({
  zIndex: 20,
  drag: function(event){...},
  helper: function(){
    $("#outerElement").append($("#draggable").clone().attr('id', 'itWorks'))
    return $("#itWorks");
  },
})

Where $("#outerElement") is the element which contains your $("#draggable") and the element where your want to drop as well.