<!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删除!