Question

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

通过将图像从右侧拖动到左侧。在下降时，必须适合左侧的图像。我读到了关于拖放但没有找到类似的东西:( 我试过了什么？

编辑：http://postimg.org/image/je31ptb6d/（这是我的照片的一个示例。顶部是分类为类的图像 - 对于ca而言分类=“左”，对于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>

Answer 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>

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

1 个答案: