monah_79,
всё обозначено контуром, картинки сами добавьте.
здесь, картинки переместите в корзину и убедитесь что красный квадрат(строка 31) появляется в том месте где вы отпустили картинку.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>StarTrackr!</title>
<style>
#photo-grid img {
cursor: move;
}
#photo-grid img {
width: 100px;
height: 100px;
}
.trash {
position: relative;
padding: 10px 10px;
border: 1px solid white;
margin-bottom: 40px;
width: 50%;
}
#trash-image {
position: absolute;
background-image: url(images/epuff.png);
background-repeat: no-repeat;
background-size: cover;
width: 128px;
height: 120px;
background-position: 0 -768px;
top: -40px;
left: -20px;
border: 1px solid #f00;
}
.trash.drop-hover {
border: 1px solid #006400;
}
</style>
</head>
<body>
<section id="container">
<header id="header">
<h1>**************</h1>
</header>
<div id="content">
<h2>Images</h2>
<div class="trash">
<div id="trash-image" />
</div>
<img src="images/trash.png" alt="trash" />
<span id="trash-title">Drag images here to delete</span>
</div>
<div id="photo-grid">
<img src="images/fader_100.jpg" />
<img src="images/beau_100.jpg" />
<img src="images/glenda_100.jpg" />
<img src="images/mofat_100.jpg" />
</div>
</div>
<footer id="footer">
<p>
</p>
</footer>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$('#photo-grid img').draggable();
$('.trash').droppable({
hoverClass: 'drop-hover',
drop: function(event, ui) {
$(ui.draggable).hide();
let {top: t, left : l} = $('.trash').offset();
let {top, left} = ui.offset;
$('#trash-image').css({top: top - t - 10, left: left - l - 20});
$({
numberValue: 0
})
.animate({
numberValue: 6
}, {
duration: 600,
easing: "linear",
step: function(val) {
val = (-Math.round(val) * 128) + 'px';
$('#trash-image').css({
'background-position-y': val
})
}
})
}
})
})
</script>
</body>
</html>