Estoy tratando de hacer que los elementos de formulario sean arrastrables usando jQuery UI. Por ejemplo, botones, casillas de verificación, campos de texto, etc. Hasta ahora no he tenido suerte. ¿Tienes alguna idea de cómo lograr esto?jQuery Elementos de entrada arrastrables
Respuesta
elementos bien de entrada tienen que ser editable, así haciéndolos arrastrable harían ellos no editable.
los envuelven en una <span>
o una <div>
y le recomiendo encarecidamente que utilice un handle.
Creo que esto se adapta mejor a sus necesidades :) Es arrastrable + se puede cambiar el tamaño en el elemento de entrada pero no pierde su naturaleza para ser editable.
$(function(){
$('.draggable').draggable().resizable();
});
aquí está mi solución para usted: my jsFiddle.
El truco consiste en poner un div transparente sobre los elementos de entradas:
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();
Esto es lo que estaba buscando. Necesitaba mostrar las entradas del formulario, hacerlas arrastrables e inutilizables sin cambiar su apariencia para un WYSIWYG. No puedo creer que no haya pensado en esta simple solución. – Johannes
la mejor solución es que se los pone en un div o el intervalo de
quizás 3 años demasiado tarde, pero se podía despachar evento y el uso siguiente fragmento de un comportamiento más esperado:
$(".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)
}
});
'initMouseEvent' está en desuso - ¿Alguna idea de qué lo está reemplazando? – SQLiteNoob
@SQLiteNoob Thx para los comentarios. He actualizado la respuesta usando el constructor 'MouseEvent()' –
Gracias, es una solución brillante para el problema, – SQLiteNoob
- 1. jQuery elementos de tabla arrastrables
- 2. jquery opciones arrastrables
- 3. jQuery UI Arrastrable/Clasificable: elementos añadidos dinámicamente no arrastrables
- 4. Restringir elementos arrastrables de jQuery de la superposición/colisión con elementos hermanos
- 5. conjuntos arrastrables jQueryUI "posición: relativa" en mis divisores arrastrables
- 6. Combinando elementosControl con elementos arrastrables - Element.parent always null
- 7. ¿Puedo anular jQuery .val() solo para algunos elementos de entrada?
- 8. jQuery UI - datos arrastrables/desplegablesTransfer no está definido
- 9. QDockWidget Tablas arrastrables
- 10. Elementos de la interfaz de usuario jQuery arrastrables que utilizan una posición de inicio incorrecta cuando se desplaza el navegador?
- 11. elementos de fluido de entrada
- 12. Cómo conectar divisores arrastrables
- 13. jQuery los elementos arrastrables pierden su capacidad de arrastre después de ser intercambiados (con el ejemplo jsfiddle)
- 14. jquery ui sortables conecta listas: copia elementos
- 15. jQuery Entrada enmascarada - Valor de entrada existente
- 16. jQuery datepicker sin entrada
- 17. Explique este comportamiento extraño de las arrastrables de jQuery (en Chrome)
- 18. Los elementos de entrada de estilo CSS
- 19. Alineación vertical de elementos de entrada
- 20. jQuery Intercambio de elementos
- 21. Trazando una línea entre dos divisores arrastrables
- 22. Jquery enmascarado entrada
- 23. jQuery cada entrada hasClass
- 24. jQuery Entrada de voz HTML5
- 25. ¿Cómo evitar que los elementos redimensionables y arrastrables colapsen entre sí?
- 26. jQuery - fundido de entrada/salida de elementos conservando el diseño de flujo
- 27. Mensaje de fundido después de 10 segundos, borrando los elementos de entrada usando jQuery
- 28. La mejor manera de encontrar todos los elementos de entrada dentro de un formulario usando jQuery
- 29. Bucle sobre elementos en jQuery
- 30. Usando jquery, ¿cómo puedo verificar que una colección de elementos de entrada tenga valores únicos?
Sí, pero ¿y si no quieres que la entrada sea editable? – bryan