jQuery Elementos de entrada arrastrables

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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>&nbsp;</div><input type="text" value="..." disabled="true"/></div> 
$('body>div').draggable(); 

Answer 4

la mejor solución es que se los pone en un div o el intervalo de

Answer 5

quizás 3 años demasiado tarde, pero se podía despachar evento y el uso siguiente fragmento de un comportamiento más esperado:

DEMO jsFiddle

$(".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) 
    } 
});