新增第二個可拖拽的模塊 第一個就不可以縮放了 不知道為什么
我去不能傳附件
<!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> DO </title>
<meta name="Generator" content="EditPlus">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 參考css -->
<style type="text/css">
#top{
display: block;
width: 100%;
height: 100px;
line-height: 100px;
}
#top li{
width: 80px;
height: 25px;
line-height: 25px;
list-style: none;
float: left;
border: 1px solid black;
text-align: center;
}
.box{display:block;width:600px;}
#left,#right{width:600px;float: left;}
#rightMenu{
width: 100%;
height: 50px;
}
#rightMenu p{
width: 60px;
height: 25px;
line-height: 25px;
float:left;
margin-left:5px;
}
#rightMenu input{
width: 40px;
height: 25px;
line-height: 25px;
}
.box p{
width: 200px;
height:200px;
display: block
}
.close{
position: absolute;
right: 5px;
}
</style>
<link rel="stylesheet" type="text/css" href="https://bbs.csdn.net/topics/css/style.css" />
<link rel="stylesheet" type="text/css" href="https://bbs.csdn.net/topics/css/jquery-ui.css">
<!-- 參考js -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="https://bbs.csdn.net/topics/js/drag.js"></script>
<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
<script>
var currentId = "";
function init(){
$('.box-5 div').each(function() {
$(this).dragging({
move: 'both',
randomPosition: true,
hander: '.hander'
});
});
$(".ui-widget-content").each(function() {
$(this).resizable({
aspectRatio: true//開啟按比例縮放，也可以指定比例： 16 / 9
});
$(this).bind("click",function(){
currentId = $(this).attr("id");
})
});
}
$(function() {
var picIndex = 0;
var videoIndex = 0;
var marqueeIndex = 0;
$(".addPic").click(function(){
var id = picIndex +1;
picIndex = id;
var content = "圖片"+id;
var divId = 'pic'+id;
var html = '<div id="'+divId+'" class="ui-widget-content"><i class="hander"></i><p>'+content+'</p></div>'
$(".box").html($(".box").html()+html);
//init();
$("#"+divId).width(200);
$("#"+divId).height(200);
$(".box-5 #"+divId).dragging({
move: 'both',
randomPosition: true,
hander: '.hander'
});
$("#"+divId).resizable({
aspectRatio: true//開啟按比例縮放，也可以指定比例： 16 / 9
});
$("#"+divId).bind("click",function(){
currentId = $(this).attr("id");
})
})
$(".addVideo").click(function(){
var id = videoIndex +1;
videoIndex = id;
var content = "視頻"+id;
var divId = 'video'+id;
var html = '<div id="'+divId+'" class="ui-widget-content"><i class="hander"></i><p>'+content+'</p></div>'
$(".box").html($(".box").html()+html);
//init();
$("#"+divId).width(200);
$("#"+divId).height(200);
$(".box-5 #"+divId).dragging({
move: 'both',
randomPosition: true,
hander: '.hander'
});
$("#"+divId).resizable({
aspectRatio: true//開啟按比例縮放，也可以指定比例： 16 / 9
});
$("#"+divId).bind("click",function(){
currentId = $(this).attr("id");
})
})
$(".addMarquee").click(function(){
var id = marqueeIndex +1;
marqueeIndex = id;
var content = "跑馬燈"+id;
var divId = 'marque'+id;
var html = '<div id="'+divId+'" class="ui-widget-content"><i class="hander"></i><p>'+content+'</p></div>'
$(".box").html($(".box").html()+html);
//init();
$("#"+divId).width(200);
$("#"+divId).height(200);
$(".box-5 #"+divId).dragging({
move: 'both',
randomPosition: true,
hander: '.hander'
});
$("#"+divId).resizable({
aspectRatio: true//開啟按比例縮放，也可以指定比例： 16 / 9
});
$("#"+divId).bind("click",function(){
currentId = $(this).attr("id");
})
})
//改變盒子高度
$(".input1").keyup(function(){
var screenHeight = $(this).val();
$(".box").css("height",screenHeight+"px");
});
//改變盒子高度
$(".input2").keyup(function(){
var screenWidth = $(this).val();
$(".box").css("width",screenWidth+"px");
});
//改變小模塊左邊距
$(".input3").keyup(function(){
$("#"+currentId).css("left",$(".input3").val()+"px");
});
//改變小模塊上邊距
$(".input4").keyup(function(){
$("#"+currentId).css("top",$(".input4").val()+"px");
});
//改變小模塊寬度
$(".input5").keyup(function(){
$("#"+currentId).width($(".input5").val());
});
////改變小模塊高度
$(".input6").keyup(function(){
$("#"+currentId).height($(".input6").val());
});
});
</script>
</head>
<body>
<div id="top"><ul style="width: 250px;margin: 0 auto;"><li class="addPic">圖片</li><li class="addVideo">視頻</li><li class="addMarquee">跑馬燈</li></ul></div>
<div id="left">
<p>螢屏寬度：<input type="text" class="input1"></p>
<p>螢屏高度：<input type="text" class="input2"></p>
</div>
<div id="right">
<div id="rightMenu">
<p>左<input type="text" class="input3"></p>
<p>上<input type="text" class="input4"></p>
<p>寬<input type="text" class="input5"></p>
<p>高<input type="text" class="input6"></p>
</div>
<div class='box box-5'>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
新增第二個模塊 第一個就不可以縮放
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/38212.html
標籤：JavaScript
上一篇：一個檔案上傳到兩個檔案夾