JavaScript & jQuery; как сделать привязку перетаскивания

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

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

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

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

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

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

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

Simples!

8
drag-and-drop javascript jquery

2 ответов

есть демо о взаимодействие :

разрешить

Droppable

изменение размера

выбор

Сортировать

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

4

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