Сделать элементы внутри iframe перетаскиваемыми и изменяющими размер

Я пытаюсь сделать элементы внутри iframe перетаскиваемыми и изменяющими размер.

Сначала пользователь может добавлять такие элементы, как изображения и элементы div, которые добавляются в iframe (тот же домен). Поэтому я попытался выполнить поиск в iframe, используя

$("#iframeDiv").contents().find(".draggable").draggable();
$("#iframeDiv").contents().find(".draggable").resizable();

#iframeDiv является идентификатором iframe

.draggable является классом изображения

Я также пробовал getElementId(), чтобы найти элемент в iframe, а затем использовал

$(function() {
    $( ".draggable" ).draggable();
  });

$(function() {
        $( ".draggable" ).resizable();
      });

но ни один не работал.

Есть ли другая функция, которую я мог бы использовать, чтобы сделать ее перетаскиваемой/изменяемой?

ОБНОВЛЕНИЕ: с некоторой помощью я решил проблему перетаскивания. Однако я все еще не могу изменить размер элементов.

Вот JSFiddle. Необходимо загрузить изображение в формате jpg


jquery jquery-resizable
person Community    schedule 26.01.2014    source источник
comment
Есть несколько проблем с вашим jsFiddle. Прежде всего, вам нужно загрузить пользовательский интерфейс jquery, чтобы он был доступен для перетаскивания и изменения размера. Во-вторых, вам нужно вызвать initDrag после добавления изображения, а не во время загрузки iframe. Вот исправленная версия jsfiddle.net/eRmD4/1. Однако это все еще не работает - изображение перетаскивается только тогда, когда вы перемещаете мышь за пределы iframe, но как только мышь находится над iframe - оно не перетаскивается. Немного странно, в прошлом у меня были похожие проблемы с тем, как пользовательский интерфейс jquery обрабатывает перетаскивание/изменение размера в iframe.   -  person Karolis    schedule 26.01.2014
comment
@Karolis Спасибо за исправление. Я не понимаю, почему он тащит, когда мышь находится вне рамки. Я все еще работаю над изменением размера, но это не так хорошо.   -  person    schedule 28.01.2014
comment
Я нашел решение мыши над iframe. Я вставил iframeFix: true.   -  person    schedule 28.01.2014
comment
Вы должны ответить на этот вопрос и принять его ;)   -  person Karolis    schedule 29.01.2014

Ответы (1)


arrow_upward
0
arrow_downward 

        $(function () {
            $("#framewrap")
                .resizable()
                .draggable();           
        });

Вы можете обернуть iframe внутри перетаскиваемого / изменяемого размера div, как в демонстрации. Посмотреть демо

person newTag    schedule 05.02.2014
comment
Спасибо, но я хочу, чтобы элементы внутри iframe изменяли размер и перетаскивались. а не сам iframe. - person ; 05.02.2014