Home > Web Front-end > JS Tutorial > body text

How does jquery achieve a left jump every time mousemove occurs during dragging?

黄舟
Release: 2017-06-28 10:35:58
Original
1661 people have browsed it

jquery has written a drag and drop, but every time the mouse moves, there is always a jump to the left. How can there be no such jump?

.wrap{
width:328px;
position: absolute;
left:50%;
top:30%;
margin-left:-164px; //应该是这个margin-left造成的
padding:10px;
background:#eeeeee;
border-radius: 10px;
} 
//js
$('.wrap').on('mousedown',function(e){
var _this=$(this)
disX=e.clientX-$(this).offset().left;
disY=e.clientY-$(this).offset().top;
$(document).on('mousemove',function(e){
_this.css('left',e.clientX-disX)
_this.css('top',e.clientY-disY)
}); $(document).on('mouseup',function(){ $(this).unbind('mousemove');
})
})
Copy after login

The divItem sub-element is above the divBox.
When the mouse moves to the divItem, it has already moved from the divBox to another element.
First trigger the mouseout event of the divBox, and then trigger it mouseover event of divItem.

Your needs cannot be realized directly. See if you can use another method to achieve the effect you want.
1. You can call the method called by mouseover of divBox in the mouseover event of divItem.
2. What is your divItem used for? Can you use the background image of the divBox instead?
3. Or set the position:absolute of all divs, then set the z-index of the divBox to be greater than the z-index of the divItem,
then set the divBox to semi-transparent form.

After looking at the code for a long time, there was no problem. Then I removed the css and it was ok. Then I removed margin-left:-164px or changed it to a non-negative number; it was ok too

The above is the detailed content of How does jquery achieve a left jump every time mousemove occurs during dragging?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!