Jquery Puzzle with sortable, draggable & droppable

Question

I'm trying to build a little puzzle.
It's not necessary to use the lib's that i'm using.
If you try my fiddle: http://jsfiddle.net/fskwbrbb/
How can you drag Nr 3 to the top of the "dropzone" and under that put Nr2, but Nr1 on the side of Nr 1?

------|
   3  |
------|
----||---|
  2 || 1 |
----||---|

I don't think you'll do it without using a grid, and without calculating the *remaining free grid cells*... — Roko C. Buljan, Jun 11 '15 at 09:14
This should get you started regarding the grid: http://stackoverflow.com/questions/20695744/getting-jquery-draggable-to-snap-to-specific-grid — Roko C. Buljan, Jun 11 '15 at 09:15

Björn C · Accepted Answer · 2015-08-07T11:48:43.250

0

I've used Jquery Shapeshift for this.

JS

//Create new container
$('#btnAddContainer').on('click', function () {
//Container HTML setup
var containerHtml = $('<div class="container"></div>');

//Insert continer
$('.containers').append(containerHtml);

//Shapeshift
$('.container').shapeshift({
    enableDrag: true,
    enableCrossDrop: true,
    minColumns: 1
});
});

Check this fiddle for code:

https://jsfiddle.net/umcgqmwv/2/

edited Aug 07 '15 at 11:48

answered Aug 07 '15 at 10:33

Björn C

3,860
10
46
85

You need to explain how for this answer to be useful to anyone else encountering this problem. – Robert Longson Aug 07 '15 at 11:11

Jquery Puzzle with sortable, draggable & droppable

1 Answers1