拖动拼图的小游戏

[{"insert":"由于拖动组、拖动行和拖动列组件已改版，在此提供拼图的另一种做法：\n\n首先，先将一张正方形图片切割成九份，然后为其设置标记\n"},{"insert":{"image":"R10580997-3188c8e0c8f9bb9440c4a9c2cb94362b_5256_234_120.png"}},{"insert":"\n\n设置拖放组分类，有多少张图就需要设置一位数组有多少个值。我们拼图有多少个碎片，拖放组就有多少个分类，每个分类代表一个格子。这样做的原因是为了实现碎片拖动时交换位置，且不影响其他格子，不会造成其他格子内的碎片移动错位\n"},{"insert":{"image":"R10580997-082fd617420b1daaca1529a491c21c25_15280_671_174.png"}},{"insert":"\n\n设置不可拖放处行为为回退\n"},{"insert":{"image":"R10580997-1604d34b804fc09c240fb6fb9884a9dd_6256_268_111.png"}},{"insert":"\n\n然后设置拖放内容，复制元素是为了能够在元素被拖走的位置显示将要进行替换的元素\n"},{"insert":{"image":"R10580997-7bcb460404e84a0db7d926daf91fc1f4_56920_749_642.png"}},{"insert":"\n\n设置了分类字段后元素将会根据自身的分类显示在对应的拖放行中\n"},{"insert":{"image":"R10580997-e602332f43028610abe220e52accfa69_10411_275_187.png"}},{"insert":"\n\n在拖拽元素经过事件中获取当前拖拽元素所处位置元素的图片地址\n"},{"insert":{"image":"R10580997-1c5ff3fb675f458dbd76b3e8740831d7_9902_802_112.png"}},{"insert":"\n\n"},{"insert":{"image":"R10580997-7c66dfeffd2e302df3787279c07d0b7a_27849_752_285.png"}},{"insert":"\n\n然后设置图片属性，便有交换预览的效果\n"},{"insert":{"image":"R10580997-18afc763eda2ee02eb279d6e11371880_18282_809_182.png"}},{"insert":"\n\n结束拖动时需要将被替换的元素转移到拖拽元素原本的位置\n"},{"insert":{"image":"R10580997-6ce1cee8d682d808aab5b212bb010385_7359_449_377.png"}},{"insert":"\n\n只要设置目标元素的分类即可，同时设置元素的排序，避免出现复制元素显示在拖拽元素上面\n"},{"insert":{"image":"R10580997-26d21fd8d4b0c57426909784df1afedc_85754_872_782.png"}},{"insert":"\n\n在结束拖动的最后检测图片是否都落在属于自己的格子中\n"},{"insert":{"image":"R10580997-fa7c3fdb2cb6d4ede5cd528ef4f68d53_65234_861_573.png"}},{"insert":"\n"}]