È possibile aggiungere il contenimento (confinando al limite di un altro elemento) a Dialog dell'interfaccia utente di jQuery?Come si imposta il contenimento su una finestra di dialogo dell'interfaccia utente jQuery?
È possibile scegliere come target la finestra di dialogo e applicarvi un contenimento. Prova questo:
var container = $('.dialog-container'),
dialog = $('.ui-dialog');
// get container top left corner locations
var cx1 = container.offset().left,
cy1 = container.offset().top;
// get dialog size
var dw = dialog.outerWidth(),
dh = dialog.outerHeight();
// get container bottom right location, then subtract the dialog size
var cx2 = container.width() + cx1 - dw,
cy2 = container.height() + cy1 - dh;
dialog.draggable("option", "containment", [cx1, cy1, cx2, cy2]);
Edit: ho creato a demo per voi.
Edit2: modificata per utilizzare finestra outerWidth & outerHeight
@ Mottie di sulla strada giusta, ma c'è una soluzione più semplice e migliore:
var container = $('.dialog-container'),
dialog = $('.ui-dialog');
dialog.draggable("option", "containment", container);
differenza soluzione Mottie, questo non si rompe se la finestra ridimensiona. Ho biforcuto il JSFiddle here.
+1 Questo è stato utile. Inoltre, vale la pena notare che il 'contenitore' non deve essere effettivamente l'elemento genitore di' dialog'. Potrebbe essere qualsiasi elemento a cui vuoi limitare il movimento del dialogo. – Nikhil
@Nikhil: sì, è sicuramente da menzionare. Grazie per averlo aggiunto! – Mac
È inoltre necessario [impostare il contenimento per il widget 'ridimensionabile'] (https://stackoverflow.com/a/44401699/616460), altrimenti sarà possibile superare i limiti durante il ridimensionamento. –
@ Mac sulla traccia corretta, ma la soluzione non è completa. È necessario impostare il contenimento del widget Resizable della finestra di dialogo. Se si imposta solo il Draggable, si otterrà il contenimento quando si trascina, ma quando si afferrano i bordi e si ridimensionano, si andrà ancora oltre i limiti.
Così si vorrà fare questo, supponendo #mydialog è l'elemento della creazione della finestra di dialogo da e #boundary è l'elemento che si desidera confinare a (a proposito, il parametro di contenitore può essere anche un selettore) :
let ui = $('#mydialog').closest('.ui-dialog'); // get parent frame
ui.draggable('option', 'containment', '#boundary'); // <-- drag, but not resize
ui.resizable('option', 'containment', '#boundary'); // <-- don't forget!!!
Ecco un frammento di esempio, spostare le caselle di controllo per commutare confinamento corrispondente del widget tra 'document' (default), e '#area'. Quindi prova entrambi con il trascinamento della finestra di dialogo con la barra del titolo, e ridimensionandolo dai bordi. Nota cosa succede quando si seleziona solo "Confine trascinare":
// Create dialog from #win with mostly default options.
$('#win').dialog({
width: 200,
height: 150,
position: { my: 'center', at: 'center', of: '#area' }
});
// When checkbox changed, update confinement settings.
$('#draggable, #resizable').change(function() {
let d = $('#draggable').prop('checked');
let r = $('#resizable').prop('checked');
let ui = $('#win').closest('.ui-dialog');
ui.draggable('option', 'containment', d ? '#area' : 'document');
ui.resizable('option', 'containment', r ? '#area' : 'document');
});#area {
position: relative;
left: 2ex;
top: 2ex;
width: 400px;
height: 300px;
border: 1px solid red;
}
#win {
font-size: 10pt;
display: flex;
flex-direction: column;
}
label {
display: flex;
align-items: center;
}<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div>Example</div>
<div id="area"></div>
<div id="win" title="test">
<label><input type="checkbox" id="draggable">Contain drag</label>
<label><input type="checkbox" id="resizable">Contain resize</label>
</div>
</body>
Con contenimento vuoi dire ....? Non sono chiaro su cosa stai cercando qui, chiarisci un po '? –
Beh intendo che voglio specificare l'area in cui è possibile trascinare la finestra di dialogo. Ora può essere trascinato su tutta la finestra del browser .. – PPPHP