2017-06-27 47 views
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>

回答