5.1实例拼图，如何判断两个图片是相邻的

(function($) {

var dragSrc;

$("li").each(function(idx, ele) {

$(ele).on("dragstart", function(e) {

dragSrc = this;

})

$(ele).on("drop", function(e) {

e.preventDefault();

var myele = $(this).find("img");

$(this).append($(dragSrc).find("img"));

$(dragSrc).append(myele);

}).on("dragover", function(e) {

e.preventDefault();

}).on("dragenter", function(e) {

e.preventDefault();

}).on("dragleave", function(e) {

e.preventDefault();

})

});

})(jQuery)

<ul class="container">
<li draggable="true"> <img src="images/1.png" alt=""></li>
<li draggable="true"> <img src="images/4.png" alt=""></li>
<li draggable="true"> <img src="images/6.png" alt=""></li>
<li draggable="true"> <img src="images/3.png" alt=""></li>
<li draggable="true"> <img src="images/2.png" alt=""></li>
<li draggable="true"> <img src="images/7.png" alt=""></li>
<li draggable="true"> <img src="images/8.png" alt=""></li>
<li draggable="true"> <img src="images/5.png" alt=""></li>
<li draggable="true"> <img src="images/9.png" alt=""></li>

</ul>

实现拼图的方法我是让他们两个图片相互交换位置，我现在有个需求就是，只有相邻图片才能触发这个方法，请问这个如何判断两个图片是相邻的？我尝试过用索引和坐标，但是都不能实现。。

西岚Silan 2017-10-13

源自：HTML5拖拽上传 5-1 实例--拖拽拼图

收起

2回答

嘘_别说话 2017-10-13 17:57:48

你这个想法好复杂的说，可以试试判断图片拖动的距离，如果拖动的距离大于图片的宽度或者高度，那就不允许拖拽。

但是还有一个问题，就是斜角的图片拖动的话也要判断，好麻烦，开发中应该不会有这么麻烦的需求。

收起回答

提问者西岚Silan #1

我去问了几个大佬，他们说的方法大概有两种，一种就是坐标，取图片左上角的坐标，第二种就是索引，自己定一套规则，比如 1-1 1-2 1-3 2-1 2-2 2-3 3-1 3-2 3-3 不过实现起来好麻烦。。

2017-10-13 18:12:13
嘘_别说话回复提问者西岚Silan #2

确实太麻烦了，我觉得可以去网上找一下类似的代码，可以先看看大神们是咋写的，自己去写，总感觉有的地方逻辑不对

2017-10-16 15:53:46