J'essaie de faire des éléments de formulaire druggable à l'aide de JQuery UI. Par exemple, des boutons, des cases à cocher, des champs de texte, etc. Jusqu'à présent, je n'ai pas eu de chance. Avez-vous des idées comment accomplir cela?
6 Réponses :
Les éléments d'entrée de puits doivent être modifiables, donc les rendre enveloppez-les dans un
Oui, mais si vous ne voulez pas que l'entrée modifiable. ou un et je vous suggère fortement que vous utilisez un poignée .
1 commentaires
Je pense que cela convient mieux à vos exigences :) Son draggable + redimensionner sur l'élément d'entrée, mais vous ne perdez pas leur nature à être éditable.
$(function(){
$('.draggable').draggable().resizable();
});
Le truc consiste à placer une DIV transparente sur les éléments d'entrée:
div div{
position:absolute;
z-index:2;
height: 100%;
width: 100%;
}
div input{
position:relative;
z-index:1;
}
<div><div> </div><input type="text" value="..." disabled="true"/></div>
$('body>div').draggable();
C'est ce que je cherchais. Je devais afficher des entrées de formulaire, les faire glisser et inutilisable sans changer leur apparence pour un WYSIWYG. Je ne peux pas croire que je n'ai pas pensé à cette solution simple.
La meilleure solution est que vous les mettez dans une div ou une plage
Peut-être 3 ans trop tard, mais vous pouvez envoyer un événement et utiliser après un extrait de suite pour un comportement plus attendu:
$(".draggable").draggable({
start: function (event, ui) {
$(this).data('preventBehaviour', true);
}
});
$(".draggable").find(":input").on('mousedown', function (e) {
var mdown = new MouseEvent("mousedown", {
screenX: e.screenX,
screenY: e.screenY,
clientX: e.clientX,
clientY: e.clientY,
view: window
});
$(this).closest('.draggable')[0].dispatchEvent(mdown);
}).on('click', function (e) {
var $draggable = $(this).closest('.draggable');
if ($draggable.data("preventBehaviour")) {
e.preventDefault();
$draggable.data("preventBehaviour", false)
}
});
initmouseeventer est obsolète - une idée de ce qui le remplace?
@Sqlitenoob thx pour les commentaires. J'ai mis à jour la réponse à l'aide de MouseEveillant () Constructeur
Merci, c'est une solution brillante au problème,
Élégant! Merci.
Une autre option consiste à le mettre dans Wrapper et à définir ce CSS pour l'entrée:
pointer-events: none;