使图片可以随意并有序移动

<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>狼人杀</title>
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/style.js"></script>
</head> <body>
<div class="whole">
<img src="img/狼人mini.png" id="img1" ondragend="dragImage();" ondragstart="getCoodinate();" />
<img src="img/白痴mini.png" id="img2" ondragstart=DragStart(this)/>
<img src="img/盗贼mini.png" id="img3" ondragstart=DragStart(this)/>
<img src="img/丘比特mini.png" id="img4" ondragstart=DragStart(this)/>
<img src="img/女巫mini.png" id="img5" ondragstart=DragStart(this)/>
<img src="img/守卫mini.png" id="img6" />
<img src="img/猎人mini.png" id="img7" />
<img src="img/野孩子mini.png" id="img8" />
<img src="img/长老mini.png" id="img9" />
<img src="img/预言家mini.png" id="img10" />
</div>
<div class="left">
<img src="img/锈剑骑士mini.png" id="img11" />
</div>
<div class="right">
<img src="img/熊mini.png" id="img12" />
</div>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div id="div9"></div>
<div id="div10"></div>
<div id="div11"></div>
<div id="div12"></div>
<div id="div13"></div>
<div id="div14"></div>
<div id="div15"></div>
<div id="div16"></div>
<div id="div17"></div>
<div id="div18"></div> </body></html>
var d1, img, d2, msg, d3, d4, d5, d6, d7, d8, d9, d10, d11, d12, d13, d14, d15, d16, d17, d18;
window.onload = function() {
d1 = document.getElementById('div1');
imgA = document.getElementsByTagName("img");
d2 = document.getElementById('div2');
d3 = document.getElementById('div3');
d4 = document.getElementById('div4');
d5 = document.getElementById('div5');
d6 = document.getElementById('div6');
d7 = document.getElementById('div7');
d8 = document.getElementById('div8');
d9 = document.getElementById('div9');
d10 = document.getElementById('div10');
d11 = document.getElementById('div11');
d12 = document.getElementById('div12');
d13 = document.getElementById('div13');
d14 = document.getElementById('div14');
d15 = document.getElementById('div15');
d16 = document.getElementById('div16');
d17 = document.getElementById('div17');
d18 = document.getElementById('div18');
for(var i = 0; i < imgA.length; i++) {
imgA[i].ondragstart = function(e) { //开始拖动
e.dataTransfer.setData("tupian", this.id);
console.log(e); //（这里可以监听打印出图片的信息，尤其是dataTransfer对象）
//$(this).clone().appendTo("#div1"); //（这个可以同一张图片克隆多张，你们加上可以试试看效果）
}
}
d1.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d1.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
//show(e.dataTransfer); //监听图片
};
d1.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d2.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d2.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d2.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d3.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d3.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d3.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d4.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d4.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d4.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d5.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d5.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d5.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d6.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d6.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d6.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d7.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d7.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d7.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d8.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d8.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d8.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d9.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d9.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d9.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d10.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d10.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d10.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d11.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d11.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d11.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d12.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d12.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d12.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d13.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d13.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d13.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d14.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d14.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d14.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d15.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d15.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d15.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d16.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d16.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d16.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d17.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d17.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d17.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
d18.ondragover = function(e) { //取消默认事件
e.preventDefault();
};
d18.ondrop = function(e) { //接收img
e.preventDefault();
var i = document.getElementById(e.dataTransfer.getData("tupian"));
this.appendChild(i);
};
d18.ondragleave = function(e) {
e.preventDefault();
document.body.appendChild(e.target);
e.stopPropagation();
};
};function show(event) { //监听图片信息
var text = '';
for(var i in event) {
text += i + ":" + event[i] + "<br/>"; //键值对，键是i，值是event
}
d2.innerHTML = text;
}
        var x, y;
var height, width; function dragImage() {
x = window.event.clientX - width / 2;
y = window.event.clientY - height / 2;
var img1 = document.createElement("img");
img1.src = 'img/狼人mini.png';
img1.style.position = 'absolute';
img1.style.left = x;
img1.style.top = y;
document.body.insertBefore(img1);
image.style.visibility = "visible";
} function getCoodinate() {
x = image.clientLeft;
y = image.clientTop;
height = image.clientHeight;
width = image.clientWidth;
image.style.visibility = "hidden";
}

调试易

使图片可以随意并有序移动

解决方案 »