Éléments d'entrée jQuery Draggable

Question

J'essaie de rendre les éléments de formulaire glissables à l'aide de l'interface utilisateur jQuery. Par exemple, les boutons, les cases à cocher, les champs de texte, etc. Jusqu'à présent, je n'ai pas eu de chance. Avez-vous des idées pour y parvenir?

Answer 1

éléments bien entrée doivent être modifiables, afin de les rendre draggable feraient les uneditable.

les envelopper dans un <span> ou un <div> et je vous suggère fortement utiliser un handle.

Answer 2

Je pense que cela correspond mieux à vos besoins :) Son draggable + redimensionnable sur l'élément d'entrée mais vous n'avez pas perdu leur nature pour être modifiable.

$(function(){ 
    $('.draggable').draggable().resizable(); 
}); 

Voici ma solution pour vous: my jsFiddle.

Answer 3

L'astuce consiste à mettre un div transparent sur les entrées des éléments:

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 meilleure solution est que vous les mettez dans une div ou durée

Answer 5

Peut-être 3 ans trop tard, mais vous pouvez envoyer événement et extrait suivant l'utilisation pour un comportement plus attendu:

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) 
    } 
});