信鸽网

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

  作者：bea

本文实例讲述了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/javasc

本文实例讲述了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>

 <div id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif"></img></div>

 <div id="big"></div>

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


完整实例代码点击此处本站下载。


更多关于jQuery特效与技巧相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》


希望本文所述对大家jQuery程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: