jquery拖拽效果完整实例(附demo源码下载)

(编辑：jimmy 日期: 2025/6/29 浏览：3 次 )

本文实例讲述了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="/UploadFiles/2021-04-02/jquery-1.4.2.min.js">

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)




完整实例代码点击此处本站下载。
更多关于jQuery特效与技巧相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。

上一篇：基于jQuery实现文本框只能输入数字(小数、整数)
下一篇：基于javascript实现随机颜色变化效果