Я пытаюсь создать плавающие диалоги, а затем разрешить пользователю размещать их в любом макете, который они хотят.
У меня есть div меню наверху, а затем содержимое div, которое должно позволить пользователям позиционировать диалоги для удобства, для этого я увеличиваю размер div для контента, если пользователи хотят переместить некоторые диалоги за пределы текущего видимой области, но это работает неправильно.
Когда диалог перемещается за пределы видимой части, полосы прокрутки не следуют за диалогом, также увеличение размера работает только один раз, чтобы сделать div больше, я должен перетащить его во второй раз.
Если я перемещаю полосы прокрутки с помощью мыши колеса, я вижу, что перетаскивание не перемещается до нового размера div, но застряло со старым.
TL;DR: http://jsfiddle.net/peMGg/87/
$(".dialog").dialog({
modal: false,
open: function () {
$(this).dialog("widget").appendTo("#content");
},
drag: function(event, ui) {
var dlg = $(this).dialog("widget");
var wDlg = dlg.width();
var hDlg = dlg.height();
var xDlg = dlg.position().left
var yDlg = dlg.position().top;
var wBody = $("#content").width();
var hBody = $("#content").height();
if(wBody - (xDlg + wDlg) < 20) {
$("#content").width(wBody + 30);
}
if(hBody - (yDlg + hDlg) < 20) {
$("#content").height(hBody + 30);
}
}
});
Я считаю, вы хотите этого
http://jsfiddle.net/peMGg/102/
Поскольку максимальное перемещение диалогового окна зависит от высоты и ширины тела, вы должны сделать его неограниченным, прежде чем сделать его перетаскиваемым, это можно сделать с помощью другой функции нажатия и отпускания мыши...
Я сначала делаю его unragable открытым, поэтому мы можем добавить функцию в строку заголовка диалога:
open: function () {
$(this).dialog("widget").appendTo("#content");
$( ".dialog" ).dialog( "option", "draggable", false );
},
Я добавил:
var wBodyy = $("body").width();
var hBodyy = $("body").height();
на базе, поэтому он может быть доступен глобальным,
и затем добавил эти функции, чтобы сохранить ширину и высоту тела, а затем сделать его 20000, а затем сделать его перетаскиваемым, чтобы его можно было перетащить! и после того, как он был выпущен, он должен быть снова неотразимым !:
$(".ui-dialog-titlebar").mousedown(function() {
wBodyy = $("body").width();
hBodyy = $("body").height();
$("body").width(20000);
$("body").height(20000);
$( ".dialog" ).dialog( "option", "draggable", true );
});
$(".ui-dialog-titlebar").mouseup(function() {
$( ".dialog" ).dialog( "option", "draggable", false );
});
И последнее, что я должен положить оригинальное количество тела обратно при перетаскивании, поскольку он больше не проверяет тело! Я могу положить его на событие dragStart:
dragStart: function(event, ui) {
$("body").width(wBodyy);
$("body").height(hBodyy);
},
Кроме того, чтобы сделать его бегающим, когда мышь выходим здесь, это решение:
сделать событие mousedown следующим образом:
$(".ui-dialog-titlebar").mousedown(function() {
if ($("body").width()!=20000){
wBodyy = $("body").width();
$("body").width(20000);}
if ($("body").height()!=20000){
hBodyy = $("body").height();
$("body").height(20000);}
$( ".dialog" ).dialog( "option", "draggable", true );
});
Поэтому он меняет переменную только тогда, когда это необходимо!
а также при выводе мыши и перетаскивании, необходимо изменить на:
$(".ui-dialog-titlebar").mouseup(function() {
if ($("body").width()==20000){$("body").width(wBodyy);}
if ($("body").height()==20000){$("body").height(hBodyy);}
$( ".dialog" ).dialog( "option", "draggable", false );
});
а также
dragStart: function(event, ui) {
if ($("body").width()==20000){$("body").width(wBodyy);}
if ($("body").height()==20000){$("body").height(hBodyy);}
},
поэтому они получат изменения на nescesary Надеюсь, что это поможет
Мое лучшее предположение заключается в том, что для свойства переполнения требуется немного фактического переполнения, чтобы позволить себе выполнять эту работу. Когда вы #content
размер на лету #content
DIV больше, чем фактический контент, свойство переполнения больше не может выполнять эту работу. Добавляя max-width
и max-height
в #content
вы можете добиться эффекта, который, как я думаю, вам #content
, или, по крайней мере, он должен привести вас к правильному пути.
У меня есть сомнения в вашем вопросе,
ЕСЛИ поле .dialog
важно или фон #content
?
Я обновил fiddle
, если поле.dialog важно,
else, пожалуйста, снова опубликуйте проблему, я сделал невидимую полосу прокрутки, сделав overflow:visible
так что это один трюк, который должен работать.
Я работаю на фоне #content
опубликует новую скрипку через некоторое время.
Если что-нибудь, пожалуйста, вернитесь назад.
Изменение: Обновлено Fiddle
Обновленная fiddle2
при загрузке #content
будет расти до конца .dialog
Думаю, что надо делать :)