具有可排序、可拖动和可放置的 Jquery 拼图答案

【问题标题】：Jquery Puzzle with sortable, draggable & droppable具有可排序、可拖动和可放置的 Jquery 拼图
【发布时间】：2015-06-11 09:10:58
【问题描述】：

我正在尝试构建一个小谜题。
没有必要使用我正在使用的库。
如果你试试我的小提琴：http://jsfiddle.net/fskwbrbb/
如何将 Nr 3 拖到“dropzone”的顶部并在其下方放置 Nr2，但 Nr1 却在 Nr 1 的一侧？

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

【问题讨论】：

but Nr1 on the side of Nr 1? 什么？
如果不使用网格并且不计算剩余的空闲网格单元格...，我认为您不会这样做
这应该让您开始了解网格：stackoverflow.com/questions/20695744/…

标签： html jquery-ui jquery-ui-sortable

【解决方案1】：

我为此使用了 Jquery Shapeshift。

//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
});
});

检查这个小提琴的代码：

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

【讨论】：

您需要解释这个答案如何对遇到此问题的其他人有用。