JavaScript & jQuery; как сделать щелчок перетащить

Question

Я ищу советов от всех вас, замечательных людей, о том, как лучше всего перетаскивать мышью.

Как часть простой настольной игры, которую я сейчас пишу в JS (используя jQuery для эффектов), пользователи должны иметь возможность перетаскивать плитки из дока на сетку.

Как выполнить следующие задачи (желательно с помощью jQuery).

1. Включить перетаскивание на сетку
2. Убедитесь, что во время перетаскивания элементы привязываются к каждому квадрату сетки
3. Если плитка размещена полностью вне сетки, вернитесь в исходное место (док)
4. Если тайл находится над сеткой (в данный момент привязан), вернуть функцию x & y в функцию
5. Сделайте любые плитки перетаскиваемыми, слегка прозрачными, и сделайте их полноцветными или верните их в док

Извините, что задал такой большой вопрос, я просто не могу найти точного совета в Интернете, который позволил бы мне достичь этого!

Большое спасибо,

Редактировать: ОТВЕТЫ
1 и 2 решаются с помощью «перетаскивания»: http://jqueryui.com/demos/draggable
3 решается "сбрасываемым" http://jqueryui.com/demos/droppable
4 решается выше для проверки, а затем $(this).position.left && $(this).position.top
5 решается простым $(this).css({opacity:0.5}) внутренним началом при перетаскивании и противоположным при окончании перетаскиванием

Simples!

Answer 1

Демонстрации о взаимодействиях :

Draggable

Droppable

Изменяемый размер

Выбираемый

Сортируемый

Я надеюсь, что эти демонстрации могут помочь вам.

Answer 2

Надеюсь, это поможет вам, это для Drag & Drop с привязкой в ​​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);
  }
}