jquery拖拽效果实现方法

来源：动视网责编：小采时间：2020-11-27 19:52:25

jquery拖拽效果实现方法

jquery拖拽效果实现方法:这次给大家带来jquery拖拽效果实现方法，jquery拖拽效果实现的注意事项有哪些，下面就是实战案例，一起来看一下。运行效果截图如下：点击此处查看在线演示效果。具体代码如下：html部分：<!DOCTYPE html PUBLIC "-//W3C//DTD HT

推荐度：

点击下载本文 文档为doc格式

导读jquery拖拽效果实现方法:这次给大家带来jquery拖拽效果实现方法，jquery拖拽效果实现的注意事项有哪些，下面就是实战案例，一起来看一下。运行效果截图如下：点击此处查看在线演示效果。具体代码如下：html部分：<!DOCTYPE html PUBLIC "-//W3C//DTD HT

这次给大家带来jquery拖拽效果实现方法，jquery拖拽效果实现的注意事项有哪些，下面就是实战案例，一起来看一下。

运行效果截图如下：

点击此处查看在线演示效果。

具体代码如下：

html部分：

<!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部分：

(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)

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

jquery拖拽效果实现方法

推荐度：

点击下载本文 文档为doc格式

标签：方法实现效果

热门焦点

jquery拖拽效果实现方法

jquery拖拽效果实现方法

jquery拖拽效果实现方法

最新推荐

猜你喜欢

热门推荐