Make my draggable puzzle move by grid

Question

I am using the drag function to create more like a puzzle effect but I want my pieces to move by a grid of 100x100 px and i tried adding grid: [100,100] but didn't work.

I googled it and also looked on posted questions here but couldn't find any solution that works for me.

Here is my code:

HTML

<div id="shell">            
    <div class="puzzle">10</div>
    <div class="puzzle">1</div> 
    <div class="puzzle">4</div> 
    <div class="puzzle">7</div> 
    <div class="puzzle">11</div>    
    <div class="puzzle">2</div> 
    <div class="puzzle">5</div> 
    <div class="puzzle">8</div> 
    <div class="puzzle">12</div>    
    <div class="puzzle">6</div> 
    <div class="puzzle">9</div> 
    <div class="puzzle">3</div>            
</div>

Javascript

(function($) {
    $.fn.drags = function(opt) {

        opt = $.extend({handle:"",cursor:"move"}, opt);

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
                $('.draggable').offset({
                    top:e.pageY + pos_y - drg_h,
                    left:e.pageX + pos_x - drg_w
                }).on("mouseup", function() {
                    $(this).removeClass('draggable').css('z-index', z_idx);
                });
            });
            e.preventDefault(); // disable selection
        }).on("mouseup", function() {
            if(opt.handle === "") {
                $(this).removeClass('draggable');
            } else {
                $(this).removeClass('active-handle').parent().removeClass('draggable');
            }
        });

    }
})(jQuery);
$('.puzzle').drags();

Here is the jsFidde.

I thought you were using `jquery-ui` because `grid` option is part of it, in fact I'd recommend you add `ui`to your project, will be easier to snap to grid even, don't need to reinvent the wheel, check [this](http://api.jqueryui.com/draggable/#option-grid) out, and this [example](http://jqueryui.com/draggable/#snap-to) too — G.Mendes, Jul 23 '14 at 11:12
@G.Mendes I have tried using UI 1.9.2 and added just '$( ".puzzle" ).draggable({ grid: [ 100, 100 ] })' and it does move it but I have encountered another problem, whenever I move it and place it over another number, I need it to move that number because at this point it places it over it and you can't see it. here is the [jsfiddle](http://jsfiddle.net/brilliancedisplay/c797P/4/) — Alin, Jul 23 '14 at 11:19
@Alin Try this : http://jsfiddle.net/lotusgodkk/c797P/5/ I used sortable instead. — K K, Jul 23 '14 at 11:21
@G.Mendes Also, it seems that if the click is longer the piece sticks to the cursor and doesn't respect the rule of moving by the grid. — Alin, Jul 23 '14 at 11:22
@KK That works just fine, I will need something else too, (the numbers will actually be pieces of images and when they are placed in the correct order I want the puzzle to fadeOut and the entire image to fadeIn) but I guess I have to ask another question for that. Anyway, add it as an answer and I will mark it and correct ;) — Alin, Jul 23 '14 at 11:26

score 1 · Accepted Answer · answered Jul 23 '14 at 11:28

1

Use sortable instead :

Demo: http://jsfiddle.net/lotusgodkk/c797P/5/

JS:

$(document).ready(function () {
    $('#shell').sortable();
});

answered Jul 23 '14 at 11:28

K K

17,794
4
30
39

Great, thanks :D Do you have any idea on how to do what I am looking for further ? I am asking this cause if you do, i will give you a link here for that question too :) – Alin Jul 23 '14 at 11:32
Yeah, you can. I have to see the exact requirement and the code first – K K Jul 23 '14 at 12:18
Here it is, sorry for the late post but I apparently had to wait 90 minutes before I could post another question. [link here](http://stackoverflow.com/questions/24910726/replace-div-with-another-if-data-rel-numbers-are-in-order) – Alin Jul 23 '14 at 12:40
Yeah, added the answer. Check it – K K Jul 23 '14 at 12:46

Make my draggable puzzle move by grid

1 Answers1