0
我试图在div中移动img一段时间。但它不起作用。 我尝试使用3个事件:鼠标向下,鼠标向上和鼠标移动。 当在图像上触发鼠标向下时,它会将布尔元素设置为true。那么如果鼠标在身体上移动,它将采用鼠标的当前状态并在img当前的css上实现它。对我来说这似乎很逻辑。jquery没有jquery UI插件移动img
的代码是:
var md = false;
$('body').bind('mousemove', function(e) {
// Your Code to handle Mouse Move Globally.
if (md == true) {
var X = e.pageX - $('#pointer').offsetLeft;
var Y = e.pageY - $('#pointer').offsetTop;
$('#pointer').css('top', Y + 'px');
$('#pointer').css('left', X + 'px');
}
});
$("#pointer").mousedown(function() {
md = true;
});
$("body").mouseup(function() {
//if (md==true) {
//alert('aa');}
md = false;
});
img {
display: block;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" align="center">
<tr>
<td>
<div>Internal variables</div>
</td>
<td>
<div>Variables</div>
</td>
<td>
<div>Choose an element</div>
</td>
</tr>
<tr>
<td>
<span id="Ju-span">
\t \t \t \t \t Ju=
\t \t \t \t </span>
<input id="Ju-rectangle"> </input><br><br>
<span>
\t \t \t \t \t Iu=
\t \t \t \t </span>
<input id="Iu-rectangle"> </input><br><br>
<span>
\t \t \t \t \t A=
\t \t \t \t </span>
<input id="A-rectangle"> </input><br><br>
</td>
<td>
<span>
\t \t \t \t \t b=
\t \t \t \t </span>
<input id="b-rectangle"> </input><br><br>
<span>
\t \t \t \t \t d=
\t \t \t \t </span>
<input id="d-rectangle"> </input><br><br>
</td>
<td>
<img src="rectangle.png">
</td>
</tr>
<tr>
<td>
<span id="Ju-span">
\t \t \t \t \t Ju=
\t \t \t \t </span>
<input id="Ju-Circle"> </input><br><br>
<span>
\t \t \t \t \t Iu=
\t \t \t \t </span>
<input id="Iu-Circle"> </input><br><br>
<span>
\t \t \t \t \t A=
\t \t \t \t </span>
<input id="A-Circle"> </input><br><br>
</td>
<td>
<span>
\t \t \t \t \t r=
\t \t \t \t </span>
<input id="r-Circle"> </input><br><br>
</td>
<td>
<div><img src="Circle.png" id="pointer"></div>
</td>
</tr>
</table>
<div><img id="img-Axis" src="Axis.png"></div>