Nikola Flamel,
Вариант ... жёлтый вверх ... красный вниз ... то и другое влево вправо ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.imgSlider{
border: 1px solid #dadada;
width: 550px;
height: 200px;
overflow: hidden;
position: relative;
}
.imgSlider .carousel{
list-style: none;
margin: 0;
padding: 0;
height: 200px;
overflow: hidden;
width: 100%;
}
.imgSlider .carousel li{
list-style: none;
margin: 0;
padding: 0;
height: 150px;
width: 150px;
margin: 25px 25px 25px 0px;
background-color: gold;
float: left;
}
.imgSlider .carousel li:first-child{
margin-left: 25px;
}
.imgSlider .red li{
background-color: red;
margin: 0px 25px 25px 0px;
}
.map {
display: table;
width: 1775px;
}
.imgSlider ul.red{
height: 175px;
}
</style>
</head>
<body>
<div class="imgSlider" id="carousel"><div class="map">
<ul class="carousel">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="carousel red">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
var route;
$('.map').draggable(
{
drag: function (event, ui) {
var h = $(this).parent().height() - $(this).height(),
w = $(this).parent().width() - $(this).width();
ui.position.left > 0 && (ui.position.left = 0);
ui.position.top > 0 && (ui.position.top = 0);
ui.position.left < w && (ui.position.left = w);
ui.position.top < h && (ui.position.top = h);
Math.abs(route[0] - ui.position.top) < 50 && (ui.position.top = route[0]);
},
start: function(event, ui) {route =[ui.position.top, ui.position.left]},
stop: function(event, ui) {
var pos = {}, w = Math[route[1] < ui.position.left ? 'ceil':'floor'](ui.position.left / 175)*175;
var w = Math[ Math.abs(route[0] - ui.position.top) > 50 ? 'round' : route[1] < ui.position.left ? 'ceil':'floor'](ui.position.left / 175)*175;
Math.abs(route[0] - ui.position.top) > 50 && $(this).animate({top: route[0] > ui.position.top? -175: 0}, 600);
$(this).animate({left: w}, 600);
}
}
)
</script>
</body>
</html>
