Elementi di input trascinabili jQuery

Question

Sto cercando di rendere trascinabili gli elementi del modulo utilizzando l'interfaccia utente di jQuery. Ad esempio, pulsanti, caselle di controllo, campi di testo, ecc. Finora non ho avuto fortuna. Avete qualche idea su come realizzare questo?

Answer 1

elementi ben ingresso devono essere modificabili, in modo che li rende trascinabili li renderebbe non modificabile.

avvolgerli in un <span> o un <div> e vi consiglio caldamente di utilizzare un handle.

Answer 2

Penso che questo sia più adatto alle tue esigenze :) È trascinabile + ridimensionabile sull'elemento di input ma non hai perso la natura per essere modificabile.

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

Ecco la mia soluzione per voi: my jsFiddle.

Answer 3

Il trucco consiste nel mettere un div trasparente sopra gli elementi ingressi:

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 soluzione migliore è che li metti in un div o luce

Answer 5

forse 3 anni di ritardo, ma si poteva spedire evento e l'uso seguente frammento di codice per un comportamento più atteso:

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