Comment définir le confinement sur une boîte de dialogue jQuery UI?

Est-il possible d'ajouter un confinement (en se limitant à la limite d'un autre élément) à l'interface utilisateur de jQuery Dialog?Comment définir le confinement sur une boîte de dialogue jQuery UI?

Source

2010-05-25 PPPHP

par confinement vous dire ....? Je ne suis pas clair sur ce que vous êtes après ici, clarifier un peu? –

Eh bien, je veux dire que je veux spécifier la zone où le dialogue peut être déplacé. Maintenant, il peut être traîné partout dans la fenêtre du navigateur .. – PPPHP

Vous pouvez cibler la boîte de dialogue et lui appliquer un confinement. Essayez ceci:

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: Je mis en place pour vous a demo.
Edit2: Changé utiliser dialogue outerWidth & outerHeight

Source

2010-05-25 11:59:53 Mottie

Hey merci beaucoup! – PPPHP

Le problème avec ceci est si vous redimensionnez la fenêtre, alors la fonctionnalité casse ... –

@Lee: c'est facile à résoudre, voir ma réponse. – Mac

@ de Mottie sur la bonne voie, mais il y a une solution plus simple et mieux:

var container = $('.dialog-container'), 
    dialog = $('.ui-dialog'); 
dialog.draggable("option", "containment", container);

Contrairement à la solution de Mottie, cela ne cassera pas si la fenêtre est redimensionnée. J'ai fourchu le JSFiddle here.

Source

2013-04-09 06:21:21 Mac

+1 Cela a été utile. Notez également que le conteneur n'a pas besoin d'être le parent de l'élément dialog. Cela peut être n'importe quel élément auquel vous voulez restreindre le mouvement du dialogue. – Nikhil

@Nikhil: oui, ça vaut vraiment la peine d'être mentionné. Merci d'avoir ajouté ça! – Mac

Vous devez également [définir le confinement pour le widget 'resizable'] (https://stackoverflow.com/a/44401699/616460), ou vous serez toujours en mesure de franchir les limites lors du redimensionnement. –

@ Mac est sur la bonne voie, mais la solution n'est pas complète. Vous devez également définir le confinement du widget Resizable de la boîte de dialogue. Si vous ne définissez que le Draggable, vous obtiendrez un confinement lorsque vous faites glisser, mais lorsque vous saisissez les bords et redimensionnez vous allez toujours sortir des limites.

Donc, vous aurez envie de le faire, en supposant que #mydialog est l'élément que vous avez initialement créé le dialogue, et #boundary est l'élément que vous souhaitez le confiner (à propos, le paramètre conteneur peut également être un sélecteur) :

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!!!

Voici un extrait de exemple, activer les cases pour changer le confinement du widget correspondant entre 'document' (valeur par défaut), et '#area'. Ensuite, expérimentez les deux en faisant glisser le dialogue par sa barre de titre, et en le redimensionnant par ses bords. Notez ce qui se passe lorsque vous ne sélectionnez "confinent glisser":

// 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>

Source

2017-06-07 00:31:28

Comment définir le confinement sur une boîte de dialogue jQuery UI?

Répondre

Questions connexes