如何在JavaScript中获取event.target

时间：2018-10-31 14:03:41

标签： javascript html

我有一个拖放代码，ROUND BOX可以拖放到三个矩形框中的任意一个，其中image is equal to digit放在圆形框中，

我已使用 event.target.itemIndex 检查 target 和已删除项目的项目索引。

我已经存储了放置到 x 的itemindex，并定位到 y

在将轮箱放到具有交错图像的盒子中时，我得到了 x 的值，但没有得到 y

的值

如何在**ev.target.dataset.itemIndex;**上拖放RVALUE()的值

var randomIndex;
var array2 = [];
var item;
var tempimages = [];
var notesselected = [];
 
var items = [
{label:'1',url:'https://via.placeholder.com/150x150.jpg?text=image1'},
{label:'2',url:'https://via.placeholder.com/150x150.jpg?text=image2'},
{label:'3',url:'https://via.placeholder.com/150x150.jpg?text=image3'},
{label:'4',url:'https://via.placeholder.com/150x150.jpg?text=image4'},
{label:'5',url:'https://via.placeholder.com/150x150.jpg?text=image5'},
{label:'6',url:'https://via.placeholder.com/150x150.jpg?text=image6'},
{label:'7',url:'https://via.placeholder.com/150x150.jpg?text=image7'},
{label:'8',url:'https://via.placeholder.com/150x150.jpg?text=image8'},
{label:'9',url:'https://via.placeholder.com/150x150.jpg?text=image9'}];

var notes = [
'https://via.placeholder.com/75x75?text=1',
'https://via.placeholder.com/75x75?text=2',
'https://via.placeholder.com/75x75?text=3',
'https://via.placeholder.com/75x75?text=4',                                                                                  'https://via.placeholder.com/75x75?text=5',
'https://via.placeholder.com/75x75?text=6',
'https://via.placeholder.com/75x75?text=7',
'https://via.placeholder.com/75x75?text=8',
'https://via.placeholder.com/75x75?text=9'
];


array2 = items.slice();
notes2 = notes.slice();

boxtags = document.getElementsByClassName("box");

function rvalue() 
{
	
for (var index = 0; index < 3; index++)
{
randomIndex = Math.floor(Math.random() *array2.length)

item = array2[randomIndex];

tempimages.push({data: item,index: randomIndex });
notesselected.push({data: notes2[randomIndex],index: randomIndex});
	
boxtags[index].style.backgroundImage = 'url(' + item.url + ')'; 

array2.splice(randomIndex, 1);
notes2.splice(randomIndex, 1);
}
}


function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}



function drop(ev) {

ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var el = document.getElementById(data);
  
var x=document.getElementById("slide").dataset.itemIndex;
if(typeof tempimages[randomIndex] !== 'undefined') 
{ var y = tempimages[randomIndex].index; }
console.log(x);
console.log(y);
if(x==y)
{

ev.currentTarget.style.backgroundColor = 'initial';
ev.currentTarget.style.backgroundImage = 'initial';
ev.currentTarget.style.border = 'initial';

var pParagraph = ev.currentTarget.firstElementChild;
pParagraph.style.visibility = "hidden";
item = this.item;
var arrayvalue = item.dataindex;
tempimages.splice(arrayvalue, 1);
if (tempimages.length == 0) {
    rvalue();
    }
displayAllImages();
 
}
}
function displayAllImages()
{
if (tempimages.length == 0) 
{
rvalue();
}

var arr2=notesselected;
item = arr2.shift();
image = document.getElementById('slide');
image.src =item.data;
image.dataset.itemIndex = item.index;
}

$(function() {

  displayAllImages();

});
.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  margin: -2px;
  border-radius: 0%;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-size: contain;
}

.box002 {
  position: absolute;
  top: 25.3vh;
  left: 40.98vw;
  cursor: pointer;
}

.box002 img {
  width: 14.0vw;
  height: 23.0vh;
  border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">


<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
 <p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
 <p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
  <p name="values"></p>


</div>
</div>
</div>
</div>
</div>


<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
  <img src="" draggable="true" id="slide" border="rounded" />
</div>

1 个答案:

答案 0 :(得分：0)

更改var y = ev.target.dataset.itemIndex; 到

var y = '';
if(typeof tempimages[x] !== 'undefined') {
     y = tempimages[x].index;
}


var randomIndex;
var array2 = [];
var item;
var tempimages = [];
var notesselected = [];

var items = [{
		label: '1',
		url: 'https://via.placeholder.com/150x150.jpg?text=image1'
	}, {
		label: '2',
		url: 'https://via.placeholder.com/150x150.jpg?text=image2'
	}, {
		label: '3',
		url: 'https://via.placeholder.com/150x150.jpg?text=image3'
	}, {
		label: '4',
		url: 'https://via.placeholder.com/150x150.jpg?text=image4'
	}, {
		label: '5',
		url: 'https://via.placeholder.com/150x150.jpg?text=image5'
	}, {
		label: '6',
		url: 'https://via.placeholder.com/150x150.jpg?text=image6'
	}, {
		label: '7',
		url: 'https://via.placeholder.com/150x150.jpg?text=image7'
	}, {
		label: '8',
		url: 'https://via.placeholder.com/150x150.jpg?text=image8'
	}, {
		label: '9',
		url: 'https://via.placeholder.com/150x150.jpg?text=image9'
	}
];

var notes = [
	'https://via.placeholder.com/75x75?text=1',
	'https://via.placeholder.com/75x75?text=2',
	'https://via.placeholder.com/75x75?text=3',
	'https://via.placeholder.com/75x75?text=4', 'https://via.placeholder.com/75x75?text=5',
	'https://via.placeholder.com/75x75?text=6',
	'https://via.placeholder.com/75x75?text=7',
	'https://via.placeholder.com/75x75?text=8',
	'https://via.placeholder.com/75x75?text=9'
];

array2 = items.slice();
notes2 = notes.slice();

boxtags = document.getElementsByClassName("box");

function rvalue() {

	for (var index = 0; index < 3; index++) {
		randomIndex = Math.floor(Math.random() * array2.length)

			item = array2[randomIndex];

		tempimages.push({
			data: item,
			index: randomIndex
		});
		notesselected.push({
			data: notes2[randomIndex],
			index: randomIndex
		});

		boxtags[index].style.backgroundImage = 'url(' + item.url + ')';

		array2.splice(randomIndex, 1);
		notes2.splice(randomIndex, 1);
	}
}

function allowDrop(ev) {
	ev.preventDefault();
}

function drag(ev) {
	ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {

	ev.preventDefault();
	var data = ev.dataTransfer.getData("Text");
	var el = document.getElementById(data);

	var x = document.getElementById("slide").dataset.itemIndex;
	var y = '';
  console.log('typeof tempimages[x]');
  console.log(typeof tempimages[x]);

	if (typeof tempimages[x] !== 'undefined') {
		 y = tempimages[x].index;
	}

	console.log(x);
	console.log(y);
	if (x == y) {
		console.log('right place');
		ev.currentTarget.style.backgroundColor = 'initial';
		ev.currentTarget.style.backgroundImage = 'initial';
		ev.currentTarget.style.border = 'initial';

		var pParagraph = ev.currentTarget.firstElementChild;
		pParagraph.style.visibility = "hidden";
		item = this.item;
		var arrayvalue = item.dataindex;
		tempimages.splice(arrayvalue, 1);
		if (tempimages.length == 0) {
			rvalue();
		}
		displayAllImages();
	} else {
		console.log('wrong place');
	}

	

	//}
}
function displayAllImages() {
	if (tempimages.length == 0) {
		rvalue();
	}

	var arr2 = notesselected;
	item = arr2.shift();
	image = document.getElementById('slide');
	image.src = item.data;
	image.dataset.itemIndex = item.index;
}

$(function () {

	displayAllImages();

});
.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  margin: -2px;
  border-radius: 0%;
}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-size: contain;
}

.box002 {
  position: absolute;
  top: 25.3vh;
  left: 40.98vw;
  cursor: pointer;
}

.box002 img {
  width: 14.0vw;
  height: 23.0vh;
  border-radius: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
<div class="containerr">
<div class="pic" id="content">
<div id="container">


<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
 <p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
 <p name="values"></p>
</div>
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
  <p name="values"></p>


</div>
</div>
</div>
</div>
</div>


<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
  <img src="" draggable="true" id="slide" border="rounded" />
</div>

相关问题
最新问题