Issues with jQuery UI resizable and draggable

Question

I've got a div that I want to be able to resize and drag around but am seeing issues. This div is absolute positioned and has a z-index of 1000. It has text in it but can have a lot of whitespace as well.

For draggable, it will work if the mouse is over a part of the div that has text. If there's no text, it can't grab the div.

I can't get the resizable plugin to work at all. I can see the divs that are added and the little chevron looking thing at the bottom right. But again, when I click there nothing happens and it ends up highlighting text in the divs behind this div.

I noticed that ui-resizable is trying to set my div's css position to relative but is being overridden by my css which is making it absolute. I can't find any reference that you can't use this widget on an absolute positioned element. In fact, reading online it seems like this shouldn't be a problem.

Any ideas?

Answer 1

Absolute positioning does not affect the div from being either resizable OR draggable. This seems to work just fine:

HTML

<div id="dragResize"></div>

JQuery

$("#dragResize").draggable().resizable();

JSFiddle

I believe that your problem is somewhere else in your code.

Answer 2

I figured out what the problem was. On the grand parent of the div I was applying this to, I had earlier set its z-index to -1 to make sure things lined up in the right order. When I changed that to 1, everything worked fine. So I think the problem was some outer div overlaying the draggable, resizable div.