Добрый день!
Я недавно начал HTML5 и JavaScript, особенно в области перетаскивания.Я пришел к небольшой проблеме.Как вы можете видеть из моего кода, у меня есть 6 перетаскиваемых изображений с соответствующими идентификаторами.Может кто-нибудь направить или помочь мне, как отобразить текст в зависимости от того, какое изображение (идентификатор) было удалено.на данный момент все имеют одинаковый текстовый дисплей при отбрасывании изображений.я знаю, что это может быть сделано через заявления if, но у меня проблемы с javascript.может кто-нибудь просветить меня, пожалуйста.Большое спасибо!
<!DOCTYPE HTML>
<html>
<head>
<!-- <link href='//fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" href="animate.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example 25 | Rick's code</title>
<link rel="author" href="http://google.com/+RicardTorres"/>
</head>
<body>
<div class="container">
<div class="row">
<h1>Drag and Drop test</h1>
</div>
<div class="row">
<div id="drop">
<div id="output"></div>
</div>
</div>
<div class="row">
<div id="total-costs">
Total costs: <span></span>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-sm-6">
<div draggable="true" class="dragable-item" id="1" data-title="Box 1" data-price="200"><img class="image" src="7808910503.jpg"></div>
</div>
<div class="col-lg-2 col-sm-6">
<div draggable="true" class="dragable-item" id="2" data-title="Box 2" data-price="250"><img class="image" src="7943544458.jpg"></div>
</div>
<div class="col-lg-2 col-sm-6">
<div draggable="true" class="dragable-item" id="3" data-title="Box 3" data-price="260"><img class="image" src="8077136002.jpg"></div>
</div>
<div class="col-lg-2 col-sm-6">
<div draggable="true" class="dragable-item" id="4" data-title="Box 4" data-price="270"><img class="image" src="7808910503.jpg"></div>
</div>
<div class="col-lg-2 col-sm-6">
<div draggable="true" class="dragable-item" id="5" data-title="Box 3" data-price="260"><img class="image" src="8077136002.jpg"></div>
</div>
<div class="col-lg-2 col-sm-6">
<div draggable="true" class="dragable-item" id="6" data-title="Box 2" data-price="250"><img class="image" src="7943544458.jpg"></div>
</div>
</div>
<p id="demo"></p>
<div style="clear:both;"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
// Callback function when cancelling the event
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
function refresh_total_costs(total_costs){
$('#total-costs span').text(total_costs);
}
$(document).ready(function() {
var total_costs = 0;
refresh_total_costs(total_costs);
// Get the #drop zone
var drop = document.getElementById('drop');
var draggedItem = null;
// Add the Event Listener to each draggable item
$('.dragable-item').each(function(index){
$(this)[0].addEventListener('dragstart',function(e){
draggedItem = jQuery(this);
e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
},false);
});
drop.addEventListener('dragover', cancel);
drop.addEventListener('dragenter', cancel);
drop.addEventListener('drop', function (e) {
e.preventDefault();
// Let's play with the data attribute
var html = $(draggedItem).data('title') + " costs " + $(draggedItem).data('price') + "<br />";
$('#output').prepend( html );
total_costs += parseInt($(draggedItem).data('price'));
refresh_total_costs(total_costs);
return false;
});
});
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the image.";
event.target.style.opacity = "1";
});
</script>
</body>
</html>