可视化的“英语单词元素”在页面上，如何实现自由拖拽？

大家好！我需要使用这样一个功能 —— 将一组“单词div”显示到前端页面上，方便查看，有以下几点要求：
  1.“单词div”可以自由拖拽，并且可以记录保存其位置
  2.“单词div”的信息及位置从后端数据库查询获得
  3.“单词div”之间不能相互重叠

为了实现这个功能，我试了一下前端插件gridster.js，实现效果如图。但是该插件有些bug导致我不得不放弃它。所以请问：
谁有更好的，且符合我这个需求的网格布局插件推荐？ 或者说，给我提供一个新的思路实现“展示单词到页面且可手动调整的位置（类似于windows的桌面图标可拖拽 ...）”的需求？

先实现拖拽功能， 然后就是判断边界值