Javascript 如何通过拖放统一2个图像？
我有两个css类，屏幕的左侧和右侧，我需要将它们放在一起，在这些类中，我有看起来像拼图的图像： 通过将图像从右侧拖动到左侧。拖放时，必须与左侧的图像相匹配。我读过有关拖放的内容，但没有找到类似的内容：( 我试过什么 编辑：（这是我的图片的一个例子。顶部是作为类分隔的图像-class=“left”表示ca，class=“right”表示nă。底部是我从右向左拖放图像后的图像。我的问题是如何指定正确的拖放区域，使图像在我从右侧拖放图像后看起来像链接中的底部？） JS/Jquery：Javascript 如何通过拖放统一2个图像？,javascript,jquery,html,css,drag-and-drop,Javascript,Jquery,Html,Css,Drag And Drop,我有两个css类，屏幕的左侧和右侧，我需要将它们放在一起，在这些类中，我有看起来像拼图的图像： 通过将图像从右侧拖动到左侧。拖放时，必须与左侧的图像相匹配。我读过有关拖放的内容，但没有找到类似的内容：( 我试过什么 编辑：（这是我的图片的一个例子。顶部是作为类分隔的图像-class=“left”表示ca，class=“right”表示nă。底部是我从右向左拖放图像后的图像。我的问题是如何指定正确的拖放区域，使图像在我从右侧拖放图像后看起来像链接中的底部？） JS/Jquery： // shuff
// 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',
});
});
<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>
要解决您的问题，您必须构建一个网格 并通过将栅格正方形的位置作为参考来使用拖放。 这是一个简单的例子来给你一个想法
<!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>
例子
#网格{
背景色：#09F；
高度：130像素；
宽度：390px；
位置：相对位置；
保证金：100像素自动；
}
.广场{
高度：128px；
宽度：128px；
边框：1px实心#999；
浮动：左；
}
#第一图像{
位置：绝对位置；
左：0px；
}
#第二图像{
位置：绝对位置；
右：0px；
}
$（文档）.ready（函数（）{
对于（xx=0；xx<3；xx++）{
$（“#网格”）。追加（$（''）；
};
$（'.dr'）。打开（“dragstart”，函数（事件）{
var dt=event.originalEvent.dataTransfer；
dt.setData（'Text'，$（this.attr（'id'））；
});
$（'div.square'）。在（“dragenter dragover drop”，函数（事件）{
event.preventDefault（）；
如果（event.type=='drop'）{
var data=event.originalEvent.dataTransfer.getData（'Text'，$（this.attr（'id'））；
de=$（'#'+数据）.detach（）；
var x=$（this）.position（）.left；
变量y=$（this）.position（）.top；
css（{'position'：'absolute'，'top'：y+'px'，'left'：x+'px'}）；
};
});
});