Intentando hacer letras arrastrables para hacer una palabra

Estoy tratando de hacer que las letras sean arrastrables para hacer una palabra. Pero por alguna razón, simplemente no funcionará.

Mi HTML:

  Word Maker        

w

p

i

r

o

m

l

l

w

y

u

o

g

t

o

o

i

t

h

e

m

Código JS:

 $(function() { $("letters").draggable(); }); 

Debería intentar aplicar .draggable() a todos sus elementos con la clase makeDraggable . Eche un vistazo a este ejemplo . Simplemente cambiando su selector jquery le permitirá hacer que las letras individuales sean arrastrables.

El primer problema que tienes es $('letters') . Ese selector le está diciendo a jQuery que encuentre todos los elementos que fueron creados por una etiqueta , que no es ninguno.

Es posible que haya querido decir $('#letters') lugar, que seleccionaría un elemento, el

con una id de letters .

Puede beneficiarse de alguna lectura adicional sobre los selectores jQuery .

Probablemente lo que quiere usar es .sortable (), es mejor crear palabras, eche un vistazo a este violín: http://jsfiddle.net/CqqxE/

Todo lo que tienes que hacer en ti js es:

 $(function () { $("#letters").sortable(); }); 

Entonces puedes agregar un poco de fantasía para hacer las cosas más geniales

 .makeDraggable { width: 20px; height: 20px; background-color: #CDE; float: left; /* Important to align letters */ text-align: center; cursor: pointer; } .makeDraggable:active { background-color: #DCC; width: 24px; height: 24px; } 

EDIT # 1:

Por supuesto, ahora no necesitas todas esas clases … http://jsfiddle.net/promatik/CqqxE/1/

Creando palabras:

 
w
o
r
d
a
n
o
t
h
e
r

Y JS:

 $(function () { $(".word").sortable(); });