Home  >  Article  >  Web Front-end  >  How to implement jQuery drag effect

How to implement jQuery drag effect

小云云
小云云Original
2018-01-06 10:31:191076browse

This article mainly introduces you to the simple code of jquery to achieve drag effect. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

JQuery implements the drag effect example code. The specific code is as follows:

<!DOCTYPE html>
 <html>
<head>
<style>
 p{ width:100px; height:100px; background:red; position:absolute;}
 </style>
 <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
 <script>
 $(function(){
var disX = 0;
var disY = 0;
$(&#39;p&#39;).mousedown(function(ev){
disX = ev.pageX - $(this).offset().left;//获取鼠标到元素的left,top位置
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev){
$(&#39;p&#39;).css(&#39;left&#39;,ev.pageX - disX);//获取移动后鼠标的位置,并重新赋值给元素
$(&#39;p&#39;).css(&#39;top&#39;,ev.pageY - disY);
});
$(document).mouseup(function(){
$(document).off();
});
return false;
});
 });
 </script>
 </head>
 <body>
 <p></p>
 </body>
 </html>

Related recommendations:

WeChat applet implements mouse dragging effect implementation method

Using js to implement div dragging effect example (compatible with PC and mobile terminals)

js implements the effect of dragging div on the page

The above is the detailed content of How to implement jQuery drag effect. For more information, please follow other related articles on the PHP Chinese website!

Statement:
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