2014-01-26 3 views
0

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

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

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

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

.draggable Будучи имиджевый

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

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

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

, но ни один из них не работал.

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

UPDATE: С некоторой помощью я решил проблему с перетаскиванием. Тем не менее, я до сих пор не могу изменять размеры элементов.

Адрес JSFiddle. JPG изображение должно быть загружено

+0

Есть несколько вопросов, связанных с вашим jsFiddle. Прежде всего, вам нужно загрузить пользовательский интерфейс jquery для перетаскивания и изменения размера, чтобы быть доступным. Во-вторых, вам нужно вызвать initDrag, как только изображение будет добавлено, а не во время загрузки iframe. Вот исправленная версия http://jsfiddle.net/eRmD4/1/. Однако он все еще не работает - изображение перемещается только тогда, когда вы перемещаете мышь за пределы iframe, но как только мышь над iframe - она ​​не перетаскивается. Немного странно, у меня были аналогичные проблемы в прошлом с тем, как пользовательский интерфейс jquery обрабатывает перетаскивание/изменение размера внутри iframe. – Karolis

+0

@ Karolis Спасибо за исправление. Я не понимаю, почему он перетаскивается, когда мышь находится вне рамки. Я все еще работаю над изменением размера, но это не так хорошо. –

+0

Я нашел решение мыши над iframe. Я вставил iframeFix: true. –

ответ

0
$("#iframeDiv").contents().find(".draggable").draggable({ 
    iframeFix: true 
}); 
0
 $(function() { 
      $("#framewrap") 
       .resizable() 
       .draggable();   
     }); 

Вы можете обернуть IFRAME внутри перетаскиваемом/перезначительном DIV как демо. See demo

+0

Спасибо, но я хочу, чтобы элементы внутри iframe изменялись и перетаскивались. а не самого iframe. –

Смежные вопросы