1

I am trying to make a draggable div visible over everything else while dragging it.

Here is my jquery touch punch code:

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

I know that z-index works only on elements with position, so i added position:relative to other divs as well. But it only works when i am on the parent div of the draggable element. I use a huge css file with lot of classes so i cant copy the proper part of it.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
embergal
  • 159
  • 2
  • 7
  • Not answering the question, but I'm pretty sure z-index is limited to a 32 bit signed integer in browsers, so 99999999999 is a lot larger than 2147483647 – tic May 24 '16 at 17:18
  • 1
    To add to my above point. Apparently the z-index loops around, so don't use any number larger than 2147483647 : http://stackoverflow.com/a/856569/1898688 – tic May 24 '16 at 17:22

1 Answers1

1

You dont need ani position in css, just create a custom function for helper where you add the actually dragged element to the outer element which contains your drop element as well.

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