Jquery在没有jquery UI插件的情况下移动img

Question

我已经尝试了一段时间在div中移动img。但它不起作用。 我尝试使用3个事件：鼠标按下，鼠标移动和鼠标移动。 当在图像上触发鼠标按下时，它将布尔元素设置为true。然后，如果鼠标在身体上移动，它将获取鼠标的当前状态并在img当前css上实现它。这对我来说似乎很合乎逻辑。

代码是：

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">
    					Ju= 
    				</span>
      <input id="Ju-rectangle"> </input><br><br>
      <span>
    					Iu= 
    				</span>
      <input id="Iu-rectangle"> </input><br><br>
      <span>
    					A= 
    				</span>
      <input id="A-rectangle"> </input><br><br>
    </td>
    <td>
      <span>
    					b= 
    				</span>
      <input id="b-rectangle"> </input><br><br>
      <span>
    					d= 
    				</span>
      <input id="d-rectangle"> </input><br><br>
    </td>
    <td>
      <img src="rectangle.png">
    </td>
  </tr>
  <tr>
    <td>
      <span id="Ju-span">
    					Ju= 
    				</span>
      <input id="Ju-Circle"> </input><br><br>
      <span>
    					Iu= 
    				</span>
      <input id="Iu-Circle"> </input><br><br>
      <span>
    					A= 
    				</span>
      <input id="A-Circle"> </input><br><br>
    </td>
    <td>
      <span>
    					r= 
    				</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>

Answer 1

你是说像拖放一样的东西吗？在这里查看这个答案： Jquery Drag and Drop without plugins