Когда вы попробуете мой код, вы можете перетащить поле № 2, окрашенное в красный цвет, влево и вправо по горизонтальной оси X. У меня проблемы с выяснением, с каким кодом я должен экспериментировать. Чтобы веб-страница отображала IMAGE-1.png, когда красное поле перетаскивается влево ниже отметки 200 пикселей по оси X.
Также, когда красное поле перетаскивается вправо над 200-пиксельной меткой оси X, я хочу, чтобы на веб-странице отображался IMAGE-2.png.
Это самое близкое руководство, которое я мог найти для того, что я хочу сделать. Но у него нет конкретного примера кода, который я ищу для своей проблемы.
jВопрос, если позиция равна проверке
Мне нужно показать весь мой код, чтобы проиллюстрировать, что делают визуальные элементы.
Я надеюсь найти лучший справочный материал, чтобы помочь в решении моей проблемы, поэтому он делает то, что я хочу.
econ.html, econ.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Economics</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="econ.css">
<style>
.draggable { width:5px; height:5px; padding:0.5em; float:left; margin:0 10px 10px 0; }
#draggable1, #draggable2 { margin-bottom:20px; }
#draggable1 { cursor:n-resize; }
#draggable2 { cursor:e-resize; background-color:red; }
#containment-wrapper { width:95%; height:150px; border:2px solid #ccc; padding:10px; }
h3 { clear:left; }
</style>
<!-- ....................................................................... -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- ....................................................................... -->
<script>
$(document).ready( function() {
$( "#draggable1" ).draggable({ axis:"y", containment:"#containment-wrapper" });
$( "#draggable2" ).draggable({ axis:"x", containment:"#containment-wrapper" });
$( "#draggable3" ).draggable({ containment:"#containment-wrapper", scroll:false });
});
</script>
<!-- ....................................................................... -->
<script>
$(document).ready( function() {
$( "body" ).mousemove( function(e) {
var pX = e.pageX;
var pY = e.pageY;
$( "#pixel-mouse" ).html( "Mouse pixel\: \( x=" +pX+ ", y=" +pY+ " \)" );
});
});
</script>
<!-- ....................................................................... -->
<!-- ....................................................................... -->
</head>
<!-- _______________________________________________________________________ -->
<body>
<h1>AD-AS model</h1>
<div id="containment-wrapper">
<div id="draggable1" class="draggable ui-widget-content">
<p>1</p>
</div>
<div id="draggable2" class="draggable ui-widget-content">
<p>2</p>
</div>
<div id="draggable3" class="draggable ui-widget-content">
<p>3</p>
</div>
</div>
</br>
<div id="pixel-mouse"></div>
</br>
<div id="pixel-tags">Click an element.</div>
<!-- ....................................................................... -->
<script>
$("*", document.body).click( function(event) {
var offset = $(this).offset();
event.stopPropagation();
$( "#pixel-tags" ).text( "\<" +this.tagName+ "\> pixel\: \( x=" +offset.left+ ", y=" +offset.top+ " \)" );
});
</script>
<!-- ....................................................................... -->
<!-- https://stackoverflow.com/questions/10218375/jquery-if-position-equals-check -->
<!-- If box number2 X coordinates are > 200 pixels, THEN DISPLAY img-2.png -->
<!-- If box number2 X coordinates are <= 200 pixels, THEN DISPLAY img-1.png -->
<script>
// $(document).ready( function() {
// if($(element).position().left > 200)
// THEN DISPLAY <img-2.png>
// if($(element).position().left <= 200)
// THEN DISPLAY <img-1.png>
// });
</script>
<!-- ....................................................................... -->
</body>
</html>
body { font-family:Arial, Helvetica, sans-serif; }
table { font-size:1em; }
.ui-draggable, .ui-droppable { background-position:top; }