问题描述
- 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> top:<span class="top">0</span> id:<span class="id">0</span> 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删除！
时间： 2024-10-25 12:28:22