jQuery在没有jQuery UI插件的情况下移动IMG

Question

我已经尝试了一段时间将IMG移入DIV中。但这无效。我尝试使用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在没有插件的情况下拖放