Home > Article > Web Front-end > How to implement jquery drag and drop effect
How to implement jquery drag and drop effect
- php中世界最好的语言Original
- 2018-04-24 11:17:461818browse
This time I will bring you how to implement the jquery drag and drop effect. What are the precautions for implementing the jquery drag and drop effect. The following is a practical case, let’s take a look.
The screenshot of the running effect is as follows:
Click here to view the online demonstration effect.
The specific code is as follows:
html part:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="tuo.js"></script>
<script type="text/javascript">
$(function(){
$("#box").tuoz();
})
</script>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#box{
height:100px;
width:100px;
background:#666666;
}
#box img{
height:50px;
width:50px;
background:#666666;
}
#big{
height:400px;
width:300px;
background:purple;
}
</style>
</head>
<body>
<p id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"></img></p>
<p id="big"></p>
</body>
</html>
jquery part:
(function(){
$.fn.extend({
tuoz:function(){
return this.each(function(){
var $this=$(this);
var ey="";
var ex="";
var mx="";
var my="";
var tx="";
var ty="";
var small_x="";
var small_y="";
var big_height="";
var big_width="";
var big_x="";
var big_y="";
var move="false";
$this.mousedown(function(e){
move="true";
mx=$this.offset().left;
my=$this.offset().top;
ex=e.clientX;
ey=e.clientY;
tx=ex-mx;
ty=ey-my;
small_x=$("#big").offset().left;
small_y=$("#big").offset().top;
big_height=$("#big").height();
big_width=$("#big").width();
big_x=small_x+big_width;
big_y=small_y+big_height;
})
$(document).mousemove(function(e){
ex=e.clientX;
ey=e.clientY;
if(move=="true"){
$this.offset({left:ex-tx,top:ey-ty});
}
})
$this.mouseup(function(e){
move=false;
ex=e.clientX;
ey=e.clientY;
if(ex>=small_x && ey>=small_y && ex<=big_x && ey<=big_y){
$("#big").append($this.html());
}
$this.offset({left:mx,top:my});
})
})
}
})
})(jQuery)
I believe you have mastered the method after reading the case in this article, and there will be more exciting things Please pay attention to other related articles on php Chinese website!
Recommended reading:
jQuery implements the function of enlarging the picture when the mouse passes over it
jQuery implements the sliding switching of pictures (with code)
The above is the detailed content of How to implement jquery drag and drop effect. For more information, please follow other related articles on the PHP Chinese website!