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>