如何通过拖放统一 2 个图像？答案

【问题标题】：How can i unify 2 images with drag and drop?如何通过拖放统一 2 个图像？
【发布时间】：2014-03-20 01:15:05
【问题描述】：

我有 2 个 css 类，屏幕左侧和右侧，我需要将它们放在一起，在这些类中，我有看起来像拼图的图像：

通过将图像从右侧拖动到左侧。在放置时，必须与左侧的图像相适应。我阅读了有关拖放的内容，但没有找到类似的内容:( 我试过什么？

编辑：http://postimg.org/image/je31ptb6d/（这是我的图片的示例。顶部是按类分隔的图像 - class="left" 用于 ca，class="right" 用于 nă。底部是我放下图像后的图像从右到左。我的问题是如何指定正确的放置区域以使图像在我从右侧放置图像后看起来像链接的底部？）

JS/Jquery：

// shuffle function for right side only

$(document).ready(function() {
var a = $(".right > img").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var bi = a[i];
    var bj = a[j];
    a[i] = bj;
    a[j] = bi;
}
$(".right").append(a);
    });

// drag and drop

$(function() {
    $( ".right img" ).draggable
    ({
        cursor: 'move',
        revert: 'invalid',
    });
    $( ".left img" ).droppable({
        tolerance: 'fit', 
    });
  });

HTML：

<div class="left">
<img class="piese" id="piesa1" src="images/Text_1.svg" />
<img class="piese" id="piesa2" src="images/Text_2.svg" />
<img class="piese" id="piesa3" src="images/Text_3.svg" />
<img class="piese" id="piesa4" src="images/Text_4.svg" />
</div>

<div class="right">
<img class="piese" id="piesa5" src="images/Text_5.svg" />
<img class="piese" id="piesa6" src="images/Text_6.svg" />
<img class="piese" id="piesa7" src="images/Text_7.svg" />
<img class="piese" id="piesa8" src="images/Text_8.svg" />
</div>

【问题讨论】：

"fit" 表示它与目标元素的大小相同。这与图像中的形状无关。拖放不会对图像进行几何分析。
有另一个元素，它是每个 <img> 的包装器以及该元素上的拖放。然后，当你得到一个匹配的一面时，将所有元素从一个包装器移动到另一个包装器中，并销毁空包装器。现在，当剩余的包装被移动时，所有连接在一起的部分也会移动，因为它们在里面
@Diodeus 当我说“适合”时，我想从 2 张图像中制作另一个长度不同的图像……类似于图像 1 + 图像 2。但我的问题是左图像的右侧是曲折不直，不知道如何在其右侧设置放置区域以放置图像
制作一个大小相同的包装器。
有人知道怎么做吗？

标签： javascript jquery html css drag-and-drop

【解决方案1】：

要解决您的问题，您必须构建一个网格并通过将网格正方形的位置作为参考来使用拖放。这是一个简单的例子，可以给你一个想法。

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#grid{
    background-color: #09F; 
    height: 130px;
    width: 390px;
    position:relative;
    margin:100px auto;
}
.square{
    height: 128px;
    width: 128px;
    border:1px solid #999;
    float:left;
}
#first-image{
    position: absolute;
    left: 0px;
}
#second-image{
    position: absolute;
    right: 0px;
}
</style>
</head>
<body>
<!--take two images by 120px with this class and id -->
<div id="grid">
    <img class="dr" id="first-image" src="your-image.png" width="128" height="128">
    <img class="dr" id="second-image" src="your-image.png" width="128" height="128">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
   $(document).ready(function(){
        for(xx = 0; xx < 3; xx++) {
          $("#grid").append($('<div class="square"></div>'));
        };
        $('.dr').on("dragstart", function (event) {
          var dt = event.originalEvent.dataTransfer;
          dt.setData('Text', $(this).attr('id'));
        });
        $('div.square').on("dragenter dragover drop", function (event) {    
           event.preventDefault();
           if (event.type === 'drop') {
              var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
              de=$('#'+data).detach();
              var x = $(this).position().left;
              var y = $(this).position().top;
              de.css({'position':'absolute','top':y+'px','left':x+'px'}).appendTo($(this)); 
           };
       });
   });  
</script>
</body>
</html>

【讨论】：

很好的例子，我会在我的项目中尝试一下。谢谢