分享一个私以为不错的JQUERY拖拽例子，另有问题求教

本帖最后由 tcwsyt 于 2010-05-12 13:54:02 编辑

解决方案 »

  1.   

    因为它是动态生成的你没有追加事件，加入生成的时候你追加了双击事件就可以了，比如 
    html = "<img src = 'xx.jpg' ondblclick='function(){alert('hello world')}'>"这样肯定可以
    或者html = "<img src = 'xx.jpg' ondblclick='test()'>"
    function test(){
        alert('hello world');
    }这样也可以，一些动态生成的标签一定要注意追加事件
      

  2.   

    何谓动态生成？
    这本来就是个静态页面，我希望完成的功能是用JQUERY给所有IMG标签（包括在拖放框里的）添加双击事件，更何况用你说的方法。
    <ul class="drag grid">
    <li id="l1"><div><img src="http://www.baidu.com/img/baidu_logo.gif" ondblclick='function(){alert('hello world')}' alt="" title="" /><span>2</span></div></li>
    <li id="l2"><div><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="" title="" /><span>23</span></div></li>
    <li id="l3"><div><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif" alt="" title="" /><span>1</span></div></li>
    <li id="l4"><div><img src="http://i1.sinaimg.cn/home/deco/2009/0330/logo_home.gif" alt="" title="" /><span>13</span></div></li>
    <li id="l5"><div><img src="http://cn.yimg.com/hp/0910/img/yahoo_logo2.gif" alt="" title="" /><span>13</span></div></li>
    <li id="l1"><div><img src="http://assets.taobaocdn.com/img/chl/fp/logo080808.png" alt="" title="" /><span>2</span></div></li>
    <li id="l2"><div><img src="http://www.it86.cc/uploads/allimg/c090630/12463QO5220-1J360.jpg" alt="" title="" /><span>23</span></div></li>
    <li id="l3"><div><img src="http://img1.cache.netease.com/img09/logo/logo.gif" alt="" title="" /><span>1</span></div></li>
    <li id="l4"><div><img src="http://www.baidu.com/img/baidu_logo.gif" alt="" title="" /><span>13</span></div></li>
    </ul>手动加上ondblclick也触发事件。
    还是我理解你的有错了？
      

  3.   

    上面说错了。手动加上ondblclick也不触发事件。
      

  4.   

    需要对每个image都加上事件，应该可以的
      

  5.   

    那样的话我还要JQUERY干嘛？
    更何况全手动加上也不行。什么叫应该可以的。。朋友你测试下再回答好嘛。。复制黏贴另存为一下用的了你几秒钟。。
      

  6.   

    现在注释掉绑定拖动那一行
    //options.handle ? ThisO.find(options.handle).mousedown(This.dragStart) : ThisO.mousedown(This.dragStart);发现可弹出hello world
    由此猜测是由于单击图片的时候默认开启拖动，所以无法触发双击事件？还是说可以在绑定拖动这里绑定一个双击事件？
    诚信求教，能解惑的， 另开200分贴相赠。
      

  7.   

    是因为options.handle ? ThisO.find(options.handle).mousedown(This.dragStart) : ThisO.mousedown(This.dragStart);绑定了图片的onmousedown而覆盖了dblclick或影响了dblclick？
      

  8.   


    不好意思   我说错了 
    刚才测试了下  应该没有影响
    应该是dragStart方法里面的某些代码影响了dblclick
    还在找  如果兄弟找到问题所在麻烦说一下
    密切关注中
      

  9.   

    tempBox.html(ThisO.html());
    ThisO.html('');
    $(document).mouseup(This.dragStop);
    if ($.browser.msie) {ThisO[0].setCapture();}//IE,鼠标移到窗口外面也能释放注释掉以上4行就可以
    dragStop方法里也有互换的对html的操作
    由此可见应该是lieri111说的那个问题
    学习了
      

  10.   


    <!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=gb2312" />
    <title>物品栏拖拽--Drag and Drop</title>
    <meta name="description" content="物品栏拖拽,拖放" />
    <meta name="keywords" content="物品栏拖拽,拖放" />
    <style type="text/css">
    body{font:12px Verdana, Arial, "宋体", sans-serif;}
    h1{font-size: 18px;font-family: 微软雅黑;font-weight:normal;}
    h2{clear:both;font-size: 16px;margin: 0;padding: 5px;border-bottom: 1px solid #69c;color: #1a1;font-family: 微软雅黑;font-weight:normal;}
    h3{margin: 0;font-size: 14px;font-family: 微软雅黑;font-weight:normal;}
    p{clear:both;}
    .author{position:fixed;_position: absolute;right:20px;top:20px;}
    ul{clear:both;float: left;}
    /*格子拖放*/
    .grid li{float: left;list-style: none;width: 64px;height: 64px;border: 1px solid #ccc;background: #eee;margin: 5px;padding: 1px;-moz-user-select:none;}
    .grid img{width:64px;height: 64px;}
    .grid div{position: relative;}
    .grid span{position: absolute;right:1px;top:1px;color: #fff;}
    /*交换数据用的DIV*/
    #tempBox{position: absolute;z-index:9999;}
    /*单个拖放demo*/
    #test{clear:both;width: 500px;margin: 30px;padding: 10px;line-height: 24px;background: #ccc;}
    </style>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    </head>
    <body>
    <h1>拖放,拖拽,仿物品栏拖拽.</h1>
    <h2>Drop Container</h2>
    <ul class="drop grid">
    <li ondblclick="test()">1</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <h2>Drags</h2>
    <ul id="drag_grid" class="drag grid">
    <li id="l1"><div><img src="http://www.baidu.com/img/baidu_logo.gif" alt="" title="" /><span>2</span></div></li>
    <li id="l2"><div><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="" title="" /><span>23</span></div></li>
    <li id="l3"><div><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif" alt="" title="" /><span>1</span></div></li>
    <li id="l4"><div><img src="http://i1.sinaimg.cn/home/deco/2009/0330/logo_home.gif" alt="" title="" /><span>13</span></div></li>
    <li id="l5"><div><img src="http://cn.yimg.com/hp/0910/img/yahoo_logo2.gif" alt="" title="" /><span>13</span></div></li>
    <li id="l1"><div><img src="http://assets.taobaocdn.com/img/chl/fp/logo080808.png" alt="" title="" /><span>2</span></div></li>
    <li id="l2"><div><img src="http://www.it86.cc/uploads/allimg/c090630/12463QO5220-1J360.jpg" alt="" title="" /><span>23</span></div></li>
    <li id="l3"><div><img src="http://img1.cache.netease.com/img09/logo/logo.gif" alt="" title="" /><span>1</span></div></li>
    <li id="l4"><div><img src="http://www.baidu.com/img/baidu_logo.gif" alt="" title="" /><span>13</span></div></li>
    </ul>
    <div id="test">
    <h2 align="center">标题拖动</h2>
    <p>这是一个JQ拖放插件.</p>
    <h3>功能:</h3>
    <ol>
    <li>限制拖动范围</li>
    <li>可设置是否可放置(drop) 及可放置(drop)位置</li>
    <li>设置拖动手柄</li>
    <li>拖动完成后回调函数</li>
    </ol>
    <p>类似物品栏里的物品可相互拖拽,而且可以有限制拖放.如:下面格子里的东西可以拖到上面 但是不能拖到下面的其他格子里; 上面格子里的东西可以在上下格子里任意拖放</p>
    </div>
    <li id="l4"><div><img src="http://www.baidu.com/img/baidu_logo.gif" alt="" title="" /><span>13</span></div></li>
    <p>类似物品栏里的物品可相互拖拽,而且可以有限制拖放.如:下面格子里的东西可以拖到上面 但是不能拖到下面的其他格子里; 上面格子里的东西可以在上下格子里任意拖放</p>
    <script type="text/javascript">
    <!--
    //拖放插件DragDrop
    $.fn.Drag=function (options) {
    var defaults={
    limit : window,//是否限制拖放范围,默认限制当前窗口内
    drop:false,//是否drop
    handle:false,//拖动手柄
    finish:function () {}//回调函数
    };
    var options=$.extend(defaults,options);
    this.X=100;//初始位置
    this.Y=100;
    this.dx=0;//位置差值
    this.dy=0;
    var This=this;
    var ThisO=$(this);//被拖目标
    var thatO;
    if (options.drop) {
    var ThatO=$(options.drop);//可放下位置
    ThisO.find('div').css({cursor:'move'});
    var tempBox=$('<div id="tempBox" class="grid"></div>');
    }else {
    options.handle ? ThisO.find(options.handle).css({cursor:'move','-moz-user-select':'none'}) : ThisO.css({cursor:'move','-moz-user-select':'none'});
    }
    //拖动开始
    this.dragStart=function (e) {
    var cX=e.pageX;
    var cY=e.pageY;
    if (options.drop) {
    ThisO=$(this);
    if (ThisO.find('div').length!=1) {return}//如果没有拖动对象就返回
    This.X=ThisO.find('div').offset().left;
    This.Y=ThisO.find('div').offset().top;
    tempBox.html(ThisO.html());
    ThisO.html('');
    $('body').append(tempBox);
    tempBox.css({left:This.X,top:This.Y});
    }else {
    This.X=ThisO.offset().left;
    This.Y=ThisO.offset().top;
    ThisO.css({margin:0})
    }
    This.dx=cX-This.X;
    This.dy=cY-This.Y;
    if (!options.drop) {ThisO.css({position:'absolute',left:This.X,top:This.Y})}
    $(document).mousemove(This.dragMove);
    $(document).mouseup(This.dragStop);
    if ($.browser.msie) {ThisO[0].setCapture();}//IE,鼠标移到窗口外面也能释放
    }
    //拖动中
    this.dragMove=function (e) {
    var cX=e.pageX;
    var cY=e.pageY;if (options.limit) {//限制拖动范围
    //容器的尺寸
    var L=$(options.limit)[0].offsetLeft ? $(options.limit).offset().left : 0;
    var T=$(options.limit)[0].offsetTop ? $(options.limit).offset().top : 0;
    var R=L+$(options.limit).width();
    var B=T+$(options.limit).height();
    //获取拖动范围
    var iLeft=cX-This.dx, iTop=cY-This.dy;
    //获取超出长度
    var iRight=iLeft+parseInt(ThisO.innerWidth())-R, iBottom=iTop+parseInt(ThisO.innerHeight())-B;
    //alert($(window).height())
    //先设置右下, 再设置左上
    if(iRight > 0) iLeft -= iRight;if(iBottom > 0) iTop -= iBottom;
    if(L > iLeft) iLeft = L;
    if(T > iTop) iTop = T;
    if (options.drop) {
    tempBox.css({left:iLeft,top:iTop})
    }else {
    ThisO.css({left : iLeft,top : iTop})
    }
    }else {
    //不限制范围
    if (options.drop) {
    tempBox.css({left:cX-This.dx,top:cY-This.dy})
    }else {
    ThisO.css({left:cX-This.dx,top:cY-This.dy});
    }
    }}
    //拖动结束
    this.dragStop=function (e) {
    if (options.drop) {
    var flag=false;
    var cX=e.pageX;
    var cY=e.pageY;
    var oLf=ThisO.offset().left;
    var oRt=oLf+ThisO.width();
    var oTp=ThisO.offset().top;
    var oBt=oTp+ThisO.height();
    if (!(cX>oLf && cX<oRt && cY>oTp && cY<oBt)) {//如果不是在原位
    for (var i=0; i<ThatO.length; i++) {
    var XL=$(ThatO[i]).offset().left;
    var XR=XL+$(ThatO[i]).width();
    var YL=$(ThatO[i]).offset().top;
    var YR=YL+$(ThatO[i]).height();
    if (XL<cX && cX<XR && YL<cY && cY<YR) {//找到拖放目标 交换位置
    var newElm=$(ThatO[i]).html();
    $(ThatO[i]).html(tempBox.html());
    ThisO.html(newElm);
    thatO=$(ThatO[i]);
    tempBox.remove();
    flag=true;
    break;//一旦找到 就终止循环
    }
    }
    }
    if (!flag) {//如果找不到拖放位置,归回原位
    tempBox.css({left:This.X,top:This.Y});
    ThisO.html(tempBox.html());
    tempBox.remove();
    }
    }
    $(document).unbind('mousemove');
    $(document).unbind('mouseup');
    options.finish(e,ThisO,thatO);
    if ($.browser.msie) {ThisO[0].releaseCapture();}
    }
    //绑定拖动
    options.handle ? ThisO.find(options.handle).mousedown(This.dragStart) : ThisO.mousedown(This.dragStart);//IE禁止选中文本
    //document.body.onselectstart=function(){return false;}
    }//下面是例子
    //.drag li 里面的元素对应的放置位置是 .drop li和drag li, 完成后回调change函数,默认限制拖动范围是窗口内部
    $('.drag li').Drag({drop:'.drop li , .drag li',finish:change});
    //.drog li 里面的元素对应的放置位置是 .drop li和.drag li, 完成后回调change函数,默认限制拖动范围是窗口内部
    $('.drop li').Drag({drop:'.drop li, .drag li',finish:change});
    $('#test').Drag({handle:'h2,p,h3,ol',finish:change});//不限制拖动范围 可设置limit:false
    var change=function (e,oldElm,newElm) {
    //alert('拖动完成')
    }
    function test(){
    alert("Hello World!")
    }
    //-->
    $(document).ready(function(){
    //$("#drop_grid").children("li").dblclick(function(){ alert("Hello World!"); }); 
    });
    </script>
    </body>
    </html>
    点击第一个看看有没有效果
      

  11.   


    <!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=gb2312" />
    <title>物品栏拖拽--Drag and Drop</title>
    <meta name="description" content="物品栏拖拽,拖放" />
    <meta name="keywords" content="物品栏拖拽,拖放" />
    <style type="text/css">
    body{font:12px Verdana, Arial, "宋体", sans-serif;}
    h1{font-size: 18px;font-family: 微软雅黑;font-weight:normal;}
    h2{clear:both;font-size: 16px;margin: 0;padding: 5px;border-bottom: 1px solid #69c;color: #1a1;font-family: 微软雅黑;font-weight:normal;}
    h3{margin: 0;font-size: 14px;font-family: 微软雅黑;font-weight:normal;}
    p{clear:both;}
    .author{position:fixed;_position: absolute;right:20px;top:20px;}
    ul{clear:both;float: left;}
    /*格子拖放*/
    .grid li{float: left;list-style: none;width: 64px;height: 64px;border: 1px solid #ccc;background: #eee;margin: 5px;padding: 1px;-moz-user-select:none;}
    .grid img{width:64px;height: 64px;}
    .grid div{position: relative;}
    .grid span{position: absolute;right:1px;top:1px;color: #fff;}
    /*交换数据用的DIV*/
    #tempBox{position: absolute;z-index:9999;}
    /*单个拖放demo*/
    #test{clear:both;width: 500px;margin: 30px;padding: 10px;line-height: 24px;background: #ccc;}
    </style>
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    </head>
    <body>
    <h1>拖放,拖拽,仿物品栏拖拽.</h1>
    <h2>Drop Container</h2>
    <ul class="drop grid">
    <li ondblclick="javascript:alert('hello world!')">1</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
    <h2>Drags</h2>
    <ul class="drag grid">
    <li id="l1"><div><img src="http://www.baidu.com/img/baidu_logo.gif" alt="" title="" /><span>2</span></div></li>
    <li id="l2"><div><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="" title="" /><span>23</span></div></li>
    <li id="l3"><div><img src="http://mat1.qq.com/www/iskin/skin4/expotclogo.gif" alt="" title="" /><span>1</span></div></li>
    <li id="l4"><div><img src="http://i1.sinaimg.cn/home/deco/2009/0330/logo_home.gif" alt="" title="" /><span>13</span></div></li>
    <li id="l5"><div><img src="http://cn.yimg.com/hp/0910/img/yahoo_logo2.gif" alt="" title="" /><span>13</span></div></li>
    <li id="l1"><div><img src="http://assets.taobaocdn.com/img/chl/fp/logo080808.png" alt="" title="" /><span>2</span></div></li>
    <li id="l2"><div><img src="http://www.it86.cc/uploads/allimg/c090630/12463QO5220-1J360.jpg" alt="" title="" /><span>23</span></div></li>
    <li id="l3"><div><img src="http://img1.cache.netease.com/img09/logo/logo.gif" alt="" title="" /><span>1</span></div></li>
    <li id="l4"><div><img src="http://www.baidu.com/img/baidu_logo.gif" alt="" title="" /><span>13</span></div></li>
    </ul>
    <div id="test">
    <h2 align="center">标题拖动</h2>
    <p>这是一个JQ拖放插件.</p>
    <h3>功能:</h3>
    <ol>
    <li>限制拖动范围</li>
    <li>可设置是否可放置(drop) 及可放置(drop)位置</li>
    <li>设置拖动手柄</li>
    <li>拖动完成后回调函数</li>
    </ol>
    <p>类似物品栏里的物品可相互拖拽,而且可以有限制拖放.如:下面格子里的东西可以拖到上面 但是不能拖到下面的其他格子里; 上面格子里的东西可以在上下格子里任意拖放</p>
    </div>
    <li id="l4"><div><img src="http://www.baidu.com/img/baidu_logo.gif" alt="" title="" /><span>13</span></div></li>
    <p>类似物品栏里的物品可相互拖拽,而且可以有限制拖放.如:下面格子里的东西可以拖到上面 但是不能拖到下面的其他格子里; 上面格子里的东西可以在上下格子里任意拖放</p>
    <script type="text/javascript">
    <!--
    //拖放插件DragDrop
    $.fn.Drag=function (options) {
    var defaults={
    limit : window,//是否限制拖放范围,默认限制当前窗口内
    drop:false,//是否drop
    handle:false,//拖动手柄
    finish:function () {}//回调函数
    };
    var options=$.extend(defaults,options);
    this.X=100;//初始位置
    this.Y=100;
    this.dx=0;//位置差值
    this.dy=0;
    var This=this;
    var ThisO=$(this);//被拖目标
    var thatO;
    if (options.drop) {
    var ThatO=$(options.drop);//可放下位置
    ThisO.find('div').css({cursor:'move'});
    var tempBox=$('<div id="tempBox" class="grid"></div>');
    }else {
    options.handle ? ThisO.find(options.handle).css({cursor:'move','-moz-user-select':'none'}) : ThisO.css({cursor:'move','-moz-user-select':'none'});
    }
    //拖动开始
    this.dragStart=function (e) {
    var cX=e.pageX;
    var cY=e.pageY;
    if (options.drop) {
    ThisO=$(this);
    if (ThisO.find('div').length!=1) {return}//如果没有拖动对象就返回
    This.X=ThisO.find('div').offset().left;
    This.Y=ThisO.find('div').offset().top;
    tempBox.html(ThisO.html());
    ThisO.html('');
    $('body').append(tempBox);
    tempBox.css({left:This.X,top:This.Y});
    }else {
    This.X=ThisO.offset().left;
    This.Y=ThisO.offset().top;
    ThisO.css({margin:0})
    }
    This.dx=cX-This.X;
    This.dy=cY-This.Y;
    if (!options.drop) {ThisO.css({position:'absolute',left:This.X,top:This.Y})}
    $(document).mousemove(This.dragMove);
    $(document).mouseup(This.dragStop);
    if ($.browser.msie) {ThisO[0].setCapture();}//IE,鼠标移到窗口外面也能释放
    }
    //拖动中
    this.dragMove=function (e) {
    var cX=e.pageX;
    var cY=e.pageY;if (options.limit) {//限制拖动范围
    //容器的尺寸
    var L=$(options.limit)[0].offsetLeft ? $(options.limit).offset().left : 0;
    var T=$(options.limit)[0].offsetTop ? $(options.limit).offset().top : 0;
    var R=L+$(options.limit).width();
    var B=T+$(options.limit).height();
    //获取拖动范围
    var iLeft=cX-This.dx, iTop=cY-This.dy;
    //获取超出长度
    var iRight=iLeft+parseInt(ThisO.innerWidth())-R, iBottom=iTop+parseInt(ThisO.innerHeight())-B;
    //alert($(window).height())
    //先设置右下, 再设置左上
    if(iRight > 0) iLeft -= iRight;if(iBottom > 0) iTop -= iBottom;
    if(L > iLeft) iLeft = L;
    if(T > iTop) iTop = T;
    if (options.drop) {
    tempBox.css({left:iLeft,top:iTop})
    }else {
    ThisO.css({left : iLeft,top : iTop})
    }
    }else {
    //不限制范围
    if (options.drop) {
    tempBox.css({left:cX-This.dx,top:cY-This.dy})
    }else {
    ThisO.css({left:cX-This.dx,top:cY-This.dy});
    }
    }}
    //拖动结束
    this.dragStop=function (e) {
    if (options.drop) {
    var flag=false;
    var cX=e.pageX;
    var cY=e.pageY;
    var oLf=ThisO.offset().left;
    var oRt=oLf+ThisO.width();
    var oTp=ThisO.offset().top;
    var oBt=oTp+ThisO.height();
    if (!(cX>oLf && cX<oRt && cY>oTp && cY<oBt)) {//如果不是在原位
    for (var i=0; i<ThatO.length; i++) {
    var XL=$(ThatO[i]).offset().left;
    var XR=XL+$(ThatO[i]).width();
    var YL=$(ThatO[i]).offset().top;
    var YR=YL+$(ThatO[i]).height();
    if (XL<cX && cX<XR && YL<cY && cY<YR) {//找到拖放目标 交换位置
    var newElm=$(ThatO[i]).html();
    $(ThatO[i]).html(tempBox.html());
    ThisO.html(newElm);
    thatO=$(ThatO[i]);
    tempBox.remove();
    flag=true;
    break;//一旦找到 就终止循环
    }
    }
    }
    if (!flag) {//如果找不到拖放位置,归回原位
    tempBox.css({left:This.X,top:This.Y});
    ThisO.html(tempBox.html());
    tempBox.remove();
    }
    }
    $(document).unbind('mousemove');
    $(document).unbind('mouseup');
    options.finish(e,ThisO,thatO);
    if ($.browser.msie) {ThisO[0].releaseCapture();}
    }
    //绑定拖动
    options.handle ? ThisO.find(options.handle).mousedown(This.dragStart) : ThisO.mousedown(This.dragStart);//IE禁止选中文本
    //document.body.onselectstart=function(){return false;}
    }//下面是例子
    //.drag li 里面的元素对应的放置位置是 .drop li和drag li, 完成后回调change函数,默认限制拖动范围是窗口内部
    $('.drag li').Drag({drop:'.drop li , .drag li',finish:change});
    //.drog li 里面的元素对应的放置位置是 .drop li和.drag li, 完成后回调change函数,默认限制拖动范围是窗口内部
    $('.drop li').Drag({drop:'.drop li, .drag li',finish:change});
    $('#test').Drag({handle:'h2,p,h3,ol',finish:change});//不限制拖动范围 可设置limit:false
    var change=function (e,oldElm,newElm) {
    //alert('拖动完成')
    }
    $("img").dblclick( function () { alert("Hello World!"); }); 
    //-->
    </script>
    </body>
    </html>
    差不多按照你的意思给第一个LI加上ondblclick事件，可是把图片跟他互换之后两个li都无任何事件。难道就没有办法了嘛？
      

  12.   

    能不能在互换操作html的同时将事件挂上？
      

  13.   

    楼主换了位置之后还是可以点击的，如果你加在了li上面的双击事件，你可以试试，你测试的时候肯定是点击的中间，点击方框的边上就有alert的，在firebug下可以看到源码的变换，也就是onldbclick事件还在
      

  14.   


    是的，确实如此，那为什么会点击方框的边上才有alert呢。。不解。。
      

  15.   


    想通了。是IMG占据了整个DIV的空间吧。。算了，再自己研究看看了。。
      

  16.   

    代码太多、使用jquery插件easydrag使用拖动很方便的。
      

  17.   

    替换的html就是一个div
    div里是img和span