JavaScript y jQuery; cómo hacer ajuste de arrastrar y soltar

Question

Estoy buscando consejos de todas las personas maravillosas sobre la mejor manera de hacer ajuste de arrastrar y soltar.

Como parte de un simple juego de mesa, actualmente estoy codificando en JS (usando jQuery para efectos) los usuarios deberían poder arrastrar las fichas desde un dock a una grilla.

¿Cómo se completan los siguientes objetivos (preferiblemente usando jQuery).

1. poder arrastrar y soltar en la cuadrícula
2. Asegurar durante arrastrar y soltar elementos se ajustan a cada cuadrado de la cuadrícula
3. Si la baldosa se coloca completamente fuera de la red, vuelve a su lugar original (muelle)
4. Si la baldosa es sobre la red (en este punto saltado), la corriente de retorno x & y a una función
5. Haga cualquier azulejos siendo arrastrados ligeramente transparente, e ir a todo color una vez en su lugar o devuelto a atracar

Perdón por hacer una pregunta tan grande, no puedo encontrar ningún consejo preciso en línea que me gustaría lograr esto!

Muchas gracias,

Editar: Las respuestas
2 se resuelven por "arrastrarse": http://jqueryui.com/demos/draggable
3 se resuelve mediante "lanzables" http://jqueryui.com/demos/droppable
4 se resuelve mediante las anteriormente para validar y luego $(this).position.left & & $(this).position.top
5 se resuelve mediante un simple $(this).css({opacity:0.5}) en el inicio al inicio del arrastre y al revés en el extremo h arrastre

Simples!

Answer 1

Hay demostraciones sobre Interacciones:

Draggable

Droppable

Resizable

Selectable

Sortable

Espero que estas demostraciones puedan ayudarlo.

Answer 2

Hope esto le ayudará, esto es para arrastrar & gota con broche de presión en jQuery

var snap = 10; /* the value of the snap in pixels */ 
var l,t,xInit,yInit,x,y; 
$(document).mousemove(function(e) { 
    x = e.pageX; 
    y = e.pageY; 
    drag(snap); 
}); 

$('#obj').mousedown(function(e){ 
    l=$('#obj').position().left; 
    t=$('#obj').position().top; 
    xInit = e.pageX; 
    yInit = e.pageY; 
}) 


function drag(snap){ 
    w=$('#obj').width(); 
    h=$('#obj').height(); 
    var left = l+x-xInit; 
    var top = t+y-yInit; 
    if(!snap==0){ 
    left = (left/snap).toFixed()*snap; 
    top = (top/snap).toFixed()*snap; 
    $('#obj').css('left',left); 
    $('#obj').css('top',top); 
    }else{ 
    $('#obj').css('left',left); 
    $('#obj').css('top',top); 
    } 
}