jQuery draggable - перетаскивание div, который содержит iframe и svg

Question

Я пытаюсь перетащить div, который содержит виджет датчика, созданный с помощью библиотеки JavaScript визуализации Google. Библиотека создает SVG внутри iframe, который находится внутри таблицы.

У меня есть div, который оборачивает все это, и я хочу быть в состоянии перетащить его. Проблема в том, что кажется, что iframe захватывает щелчки мыши, и они никогда не всплывают на div и, следовательно, перетаскивание не запускается. Кто-нибудь знает, как я могу вызвать перетаскиваемое событие вручную? Я попытался вызвать его с помощью «mousedown», но это не сработало.

Кто-нибудь еще имел эту проблему?

Спасибо.

Answer 1

Несколько вещей приходят на ум:

1) Если ваш div падает (используйте firebug, чтобы увидеть вычисленную высоту / ширину), что иногда случается с плавающими элементами, то ваша «область перетаскивания» может фактически не существовать. Дочерние элементы могут отображаться, даже если родительский элемент разрушается. Попробуйте установить явную высоту / ширину для родительского контейнера.

2) Возможно, это из-за специального дочернего элемента, который вы используете. В этом случае возможен обходной путь: создайте дочерний элемент div с той же высотой / шириной родительского элемента и установите его абсолютное позиционирование, а также создайте большой z-индекс, чтобы поместить его сверху. Это в основном помещает «слой» поверх всего контейнера. Я не уверен, как бы вы использовали функцию .draggable (), чтобы использовать этот новый слой верхнего уровня в качестве перетаскиваемой области, потому что вы также хотите перетащить весь родительский элемент. Если вы добавите .draggable () к этому новому слою, он просто перетянет этот слой в одиночку.

Простое решение: создайте «строку заголовка» для этого окна и установите свойство курсора CSS для этого подвижного значка (не уверен синтаксис). Тогда ваш пользователь знает, чтобы захватить строку заголовка и перетащить ее.

Не уверен, поможет ли это ...