lishijie0821 2014-03-20 08:51
浏览 872

jQuery的小问题,帮忙给看看吧高手!

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Draggable - Constrain movement</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-1.9.1.js"></script>
  <script src="jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .draggable { width:100px; height:100px; padding:0; float: left; margin:0; }
  .draggable p { display:none;}
  .gongneng { width:100%; position:absolute; top:0; left:0;}
  #draggable, #draggable2 { margin-bottom:20px;}
  #draggable { cursor: n-resize; }
  #draggable2 { cursor: e-resize; }
  #containment-wrapper { width:950px; height:550px; padding: 0px; margin:0 auto; }
  h3 { clear: left; }
  </style>
  <script>
    $(function() {
        //$( id ).draggable({ containment: "#containment-wrapper", scroll: false });
        //$( "#45645646" ).draggable({ containment: "#containment-wrapper", scroll: false });


                var counts = 0 ;
                var zindex = 100;

            //鼠标经过DIV层时激活
            $('#containment-wrapper').delegate('div', 'mouseover', function(){
                var divida = $(this).attr("id");
                var dividb = "#"+divida;

                //鼠标经过显示功能菜单
                $(".gongneng",dividb).show();
                $(this).css("cursor","move");
                $(this).css("border","1px #000 solid");



                //鼠标离开隐藏功能菜单
                $(dividb).mouseout(function(){
                    $(".gongneng",dividb).hide();
                    $(this).css("border","0px");
                });



                //获取DIV信息
                var de=document.getElementById(divida);
                var eLeft = de.offsetLeft, 
                    eTop = de.offsetTop,
                    eId = de.id,
                    eWidth = de.width,
                    eHeight = de.height;


                //拖动过程
                $( dividb ).draggable({
                    //限制区间
                    containment: "#containment-wrapper",
                    scroll: false,
                    //拖动开始
                    start: function() {
                        zindex++;
                        $(this).css("cursor","move");
                        $(this).css("z-index",zindex);
                    },
                    //拖动结束
                    stop: function() {
                        $(this).css("cursor","");
                        lsj(eLeft,eTop,eId,zindex);
                    }
                });


            });

            //提示信息
            function lsj( x, y, id ,zi) {
                $( "span.left", "#xinxi" ).text( x );
                $( "span.top", "#xinxi" ).text( y );
                $( "span.id", "#xinxi" ).text( id );
                $( "span.zi", "#xinxi" ).text( zi );
            }



            //删除DIV层
            $("#del").click(function(){

                //alert ("222222");

                var xinxi,ce;

                ce = $( this ).parent().parent().attr('id');

                //xinxi = ce.;

                //alert (ce);

                $( "#"+ce ).hide(500);
            });

            $("#del").click(function(){

                alert ("222222");

            });


            //放大
            $("#jia",".gongneng").click(function(){
                //缩小的数值


            });


            //缩小
            $("#jian",".gongneng").click(function(){

            });

            //添加jpg
            $("#jpg","#anniu").click(function(){
                counts++;
                var lsjx = 50 + counts;
                //添加
                $('<div id="jpg' + counts + '" class="draggable" style=" width:300px; height:200px; position: absolute; top:50px; left:50px;"><img src="ceshi.jpg" width="100%" height="100%"><p class="gongneng"><button id="del">X</button><button id="jia">+</button><button id="jian">-</button><button id="shang">↑</button><button id="xia">↓</button></p></div>').appendTo("#containment-wrapper");

            });
            //添加swf
            $("#swf","#anniu").click(function(){
                counts++;
                var lsjx = 50 + counts;
                //添加
                $('<div id="swf' + counts + '" class="draggable" style="position: absolute; top:50px; left:550px; width:350px; height:300px;"><EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=1.swf type=application/x-shockwave-flash width=100% height=100% wmode="transparent" quality="high"></EMBED><p class="gongneng"><button id="del">X</button><button id="jia">+</button><button id="jian">-</button><button id="shang">↑</button><button id="xia">↓</button></p></div>').appendTo("#containment-wrapper");

            });

            $("#gif","#anniu").click(function(){
                counts++;
                var lsjx = 50 + counts;
                //添加
                $('<div id="gif' + counts + '" class="draggable" style="position: absolute; top:50px; left:360px;"><img src="gif009.gif" width="100%" height="100%"><p class="gongneng"><button id="del">X</button><button id="jia">+</button><button id="jian">-</button><button id="shang">↑</button><button id="xia">↓</button></p></div>').appendTo("#containment-wrapper");

            });


    });


  </script>
</head>
<body>

<div id="xinxi">
    <p>left:<span class="left">0</span>&nbsp;&nbsp;top:<span class="top">0</span>&nbsp;&nbsp;id:<span class="id">0</span>&nbsp;&nbsp;zi:<span class="zi">0</span></p>
</div>
<div id="containment-wrapper" style="position:relative; background:#CCC">


      <div id="draggable4" class="draggable" style=" width:300px; height:200px; position: absolute; top:220px; left:50px;">
        <img src="ceshi.jpg" width="100%" height="100%">
        <p class="gongneng"><button id="del">X</button><button id="jia">+</button><button id="jian">-</button><button id="shang">↑</button><button id="xia">↓</button></p>
      </div>

      <div id="45645645646" class="draggable" style="position: absolute; top:220px; left:550px; width:350px; height:300px;">
        <EMBED pluginspage=http://www.macromedia.com/go/getflashplayer src=1.swf type=application/x-shockwave-flash width=100% height=100% wmode="transparent" quality="high"></EMBED>
        <p class="gongneng"><button id="del">X</button><button id="jia">+</button><button id="jian">-</button><button id="shang">↑</button><button id="xia">↓</button></p>
      </div>

      <div id="45645646" class="draggable" style="position: absolute; top:150px; left:260px;">
        <img src="gif009.gif" width="100%" height="100%">
        <p class="gongneng"><button id="del">X</button><button id="jia">+</button><button id="jian">-</button><button id="shang">↑</button><button id="xia">↓</button></p>
      </div>

      <div id="66666666666" class="draggable" style="position: absolute; top:250px; left:300px;">
        <p class="gongneng"><button id="del">X</button><button id="jia">+</button><button id="jian">-</button><button id="shang">↑</button><button id="xia">↓</button></p>
      </div>



</div>
<div id="anniu">
    <button id="jpg">添加jpg</button>
    <button id="swf">添加swf</button>
    <button id="gif">添加gif</button>
 </div>
</body>
</html>

帮忙看看这个,添加JPG或者GIF、swf后,不能点小X删除!

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 jupyterthemes 设置完毕后没有效果
    • ¥15 matlab图像高斯低通滤波
    • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
    • ¥15 钢筋实图交点识别,机器视觉代码
    • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
    • ¥50 400g qsfp 光模块iphy方案
    • ¥15 两块ADC0804用proteus仿真时,出现异常
    • ¥15 关于风控系统,如何去选择
    • ¥15 这款软件是什么?需要能满足我的需求
    • ¥15 SpringSecurityOauth2登陆前后request不一致