td

来源：互联网发布：69800工资算法表编辑：程序博客网时间：2024/04/27 21:39

jQuery克隆拖动效果_拖动购物实例

//这个是JS代码

// 拖动购物的插件

(function($){
$.fn.extend({
  draw:function(ento,showHtml){
   var minX=0,minY=0,maxX=0,maxY=0,add=true,begO=null;
   if(typeof(ento)=="string"){endO=$("#"+ento);}else{endO=ento;}
   var bagOffset=endO.offset();
   minX=bagOffset.left;
   maxX=minX+endO.width();
   minY=bagOffset.top;
   maxY=minY+endO.width();
   $(this).mouseover(function(){
    $(this).css({"border":"solid 1px #852"});
   }).mouseout(function(){
    $(this).css({"border":"solid 0px #852"});
   }).mousedown(function(e){
    var $cloneThis=$(this).clone().appendTo($(document.body));

     var x = e.clientX;
     var y = e.clientY;

     var oWidth=$cloneThis.width()/2;
     var oHeight=$cloneThis.height()/2;
     $cloneThis.css({"position":"absolute","top":y-oHeight+"px","left":x-oWidth+"px","cursor":"pointer"});
     var m = function(ne){
     var scrollTop=$(document).scrollTop();
     var scrollLeft=$(document).scrollLeft();
      if(ne.button == 1){
       add=true;
       $cloneThis.css({"left":ne.clientX+scrollLeft-oWidth+"px","top":ne.clientY+scrollTop-oHeight+"px"});
      }else {
       $cloneThis.fadeOut(500,function(){$(this).remove()});
       var bagX=ne.clientX+oWidth;
       var bagY=ne.clientY+oHeight;
       if(add&&bagX>minX &&bagX<maxX&&bagY>minY&&bagY<maxY){
        add=false;
        $(showHtml)
        .css({"display":"none"})
        .appendTo(endO).fadeIn(500);
       }
      }
     }
     $(document.body).mousemove(function(){m(event);});
     e.cancelBubble = true;

   });
  }
});
})(jQuery)

//一个简单的例子复制到html文件即可

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>购物新体验</title>
<meta name="Author" content="张志刚">
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/draw.js"></script>
<script>
$(document).ready(function(){
$("#draw").draw("bag","<table><tr><td><img src='http://images.tiantian.com/Upload/Cosmetics/zishengtang/160X160/6016_160X160.jpg' height='80'/> </td> <td> 一个新的商品 </td><td><a href='javascript:void(0)'>删除</a></td> </tr></table>");
});
</script>
</head>

<body>
<div>
选中该商品并拖到右边的格子里（购物新体验）
</div>
<div style="width:160px; height:160px; background-image:url('http://images.tiantian.com/Upload/Cosmetics/zishengtang/160X160/6016_160X160.jpg'); float:left" id="draw">
</div>
<table width="300px" style="margin-left:400px">
<tr>
    <td>拖到这里</td>
    </tr>
<tr>
        <td>
        <div style=" background-color:#C90; width:300px; min-height:500px;_height:500px" id="bag">
</div>
        </td>
    </tr>
</table>

</body>
</html>