JavaScript & jQuery; how to do snapping drag and drop
I am looking for advice from all you wonderful people on the best way to do snapping drag and drop.
As part of a simple board game I am currently coding in JS (using jQuery for effects) users should be able to drag tiles from a dock onto a grid.
How does one complete the following objectives (preferably using jQuery).
- Enable drag and drop onto the grid
- Ensure during drag and drop items snap to each square of the grid
- If the tile is placed completely off the grid, return to original place (dock)
- If the tile is over the grid (at this point snapped), return current x & y to a function
- Make any tiles being dragged slightly transparent, and go full color once in place or returned to dock
Sorry to ask such a big question, I just can't find any accurate advice online that would be me achieve this!
Many thanks,
Edit: THE开发者_如何学C ANSWERS
1&2 are solved by "draggable": http://jqueryui.com/demos/draggable 3 is solved by "droppable" http://jqueryui.com/demos/droppable 4 is solved by the above to validate and then$(this).position.left
&& $(this).position.top
5 is solved by a simple $(this).css({opacity:0.5})
inside start on drag and the opposite on finish drag
Simples!
Hope this will help you, this is for Drag & Drop with snap in 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);
}
}
精彩评论