谁帮看看这是为什么第二个不可以拖拽了

Gemerl 2020-09-14 06:35:14
新增第二个可拖拽的模块 第一个就不可以缩放了 不知道为什么

我去不能传附件


<!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="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<!-- 引用js -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="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>

...全文
2921 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
Gemerl 2020-09-15
  • 打赏
  • 举报
回复
<script type="text/javascript" src="js/drag.js"></script> 你没有引用js 当然会报错 这个js在我本地
  • 打赏
  • 举报
回复
我试了下你的代码 效果和你的不一样



debugger 会提示
Uncaught TypeError: $(...).dragging is not a function
Gemerl 2020-09-14
  • 打赏
  • 举报
回复
新增第二个模块 第一个就不可以缩放

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧