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>