Проблемы с jQuery UI изменяемого размера и перетаскивания

Question

У меня есть div, который я хочу иметь возможность изменять размер и перетаскивать, но вижу проблемы. Этот div имеет абсолютное позиционирование и имеет z-индекс 1000. Он содержит текст, но также может иметь много пробелов.

Для перетаскивания, это будет работать, если мышь находится над частью div, в которой есть текст. Если нет текста, он не может захватить div.

Я не могу заставить плагин изменяемого размера работать вообще. Я вижу добавленные элементы div и маленький шевроноподобный предмет внизу справа. Но опять же, когда я нажимаю там, ничего не происходит, и это заканчивается выделением текста в div за этим div.

Я заметил, что ui-resizable пытается установить относительную позицию CSS моего div'а, но переопределяется моим css, что делает его абсолютным. Я не могу найти ссылки, что вы не можете использовать этот виджет на элементе с абсолютным позиционированием. На самом деле, чтение в Интернете кажется, что это не должно быть проблемой.

Есть идеи?

Answer 1

Абсолютное позиционирование не влияет на то, что div может быть изменен или изменен. Это, кажется, работает просто отлично:

HTML

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

JQuery

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

JSFiddle

Я считаю, что ваша проблема где-то еще в вашем коде.

Answer 2

Я понял, в чем проблема. На прародителе div, к которому я применял это, я ранее установил его z-index равным -1, чтобы убедиться, что все выстроено в правильном порядке. Когда я изменил это на 1, все работало нормально. Поэтому я думаю, что проблема заключалась в том, что какой-то внешний div перекрывал перетаскиваемый div с изменяемым размером.