100分求助!!!层的简单问题！

beihua 2003-06-03 08:21:54
<div id=div1 style="width:400">
<div id=div2></div>
<div id=div3></div>
......
......
......
<div id=divN></div>
</div>
1>在层div1中拖动div2,div3......divN,
怎样才能使div2,div3......divN在拖动的过程中它们的上边框不能超出div1的上边界,
左边框不能超出div1的左边界,右边框不能超出div1的右边界?即到达div1的上,左,右边界就不能再拖动?
2>怎样实现当单击shift或ctrl键时可同时选择多个div,使这些选择的div右边框对齐或底端对齐?
...全文
52 19 打赏 收藏 转发到动态 举报
写回复
用AI写文章
19 条回复
切换为时间正序
请发表友善的回复…
发表回复
beihua 2003-06-07
  • 打赏
  • 举报
 回复
up!
rocsnake 2003-06-06
  • 打赏
  • 举报
 回复
你的问题越来越多了，又没有好处，不作了，其实你提的那些问题很简单，就是要花时间
xuzuning 2003-06-05
  • 打赏
  • 举报
 回复
呵呵，想在页面中写一个MID呀。
关键是用堆栈或队列保存层的指针。其他都好办
beihua 2003-06-05
  • 打赏
  • 举报
 回复
xiaoshi您好!
你的方法可以正常运行，但是却产生了新的问题:
1>用for遍历两次对于多个层(比如:40,50个)好像效率不高，能否用堆栈或动态数组?
2>对齐之后，可能两个层完全重叠，怎样禁止层之间叠加，即不允许层之间有重叠的部分，怎样判断并撤消此操作？
3>层的宽度和高度可以不相同，以左对齐为例,对齐之后有的层的右半部分已经超出了拖拽区域的右边界,如果有这种情况撤消操作？

我还个相似的问题你顺便给看看。
"在可编辑的iframe区域中怎样在"大层"的右侧从上到下并排放置"小层?不想用表格定位"
真是太麻烦您了，多谢多谢！
jsidiot 2003-06-05
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<div id=d style="position:absolute;top:50;left:50;width:700;height:500;background-color:red;"
onmousedown="down(this)" onmousemove="move(this)" onmouseup="up(this)">
<div id=d1 moveFlag=0 style="position:absolute;top:000;left:000;width:100;height:100;background-color:blue;">d1</div>
<div id=d2 moveFlag=0 style="position:absolute;top:000;left:300;width:100;height:100;background-color:yellow;">d2</div>
<div id=d3 moveFlag=0 style="position:absolute;top:200;left:300;width:100;height:100;background-color:green;">d3</div>
</div>
<button onclick="clk()">右端对齐</button>
<script language="javascript">
a=10;
function down(obj){
if(event.srcElement.tagName!="DIV") return;
if(obj==event.srcElement) return;
if(event.srcElement.moveFlag==0){
event.srcElement.moveFlag=1;
event.srcElement.oldX = event.clientX;
event.srcElement.oldY = event.clientY;
}
if(event.shiftKey){
event.srcElement.style.border = "3px outset";
event.srcElement.moveFlag=a;
a--;
}else{
event.srcElement.style.border = "";
};
event.cancelBubble = true;
}
function up(obj){
if(!event.shiftKey){
event.srcElement.moveFlag = 0;
event.srcElement.oldX = 0;
event.srcElement.oldY = 0;
}
}
function move(obj){
if(event.srcElement.tagName!="DIV") return;
if(obj==event.srcElement) return;
if(event.srcElement.moveFlag==1){
event.srcElement.style.left = event.clientX - event.srcElement.oldX+parseInt(event.srcElement.style.left);
event.srcElement.style.top = event.clientY - event.srcElement.oldY+parseInt(event.srcElement.style.top);
event.srcElement.oldX = event.clientX;
event.srcElement.oldY = event.clientY;
if(event.srcElement.getBoundingClientRect().top<event.srcElement.parentElement.getBoundingClientRect().top){
event.srcElement.style.top = 0;
}
if(event.srcElement.getBoundingClientRect().left<event.srcElement.parentElement.getBoundingClientRect().left){
event.srcElement.style.left = 0;
}
if(event.srcElement.getBoundingClientRect().bottom>event.srcElement.parentElement.getBoundingClientRect().bottom){
event.srcElement.style.top = event.srcElement.parentElement.clientHeight - event.srcElement.clientHeight;
}
if(event.srcElement.getBoundingClientRect().right>event.srcElement.parentElement.getBoundingClientRect().right){
event.srcElement.style.left = event.srcElement.parentElement.clientWidth - event.srcElement.clientWidth;
}
}
}
function clk(){
// gzg=Math.max(d.children[0].moveFlag,d.children[1].moveFlag,d.children[2].moveFlag)
// alert(gzg);
// return false;
var leftPos = -1;
// alert(leftPos)
for(var i=0;i<d.children.length;i++){
if(d.children[i].moveFlag==10){
leftPos=d.children[i].style.left;
}
}
for(var i=0;i<d.children.length;i++){
// if(d.children[i].moveFlag==10){
alert(d.children[i].moveFlag)
// if(leftPos==-1) leftPos = parseInt(d.children[i].style.left);
d.children[i].style.left = leftPos;
// }
}
a=10;
}
</script>

</BODY>
</HTML>
rocsnake 2003-06-05
  • 打赏
  • 举报
 回复
<body onmousemove="bodyMove()" onmouseup="bodyUp()" onselectstart="return false;">
<div id=d style="position:absolute;top:50;left:50;width:700;height:500;background-color:red;"
onmousedown="down(this)" onmousemove="move(this)" onmouseup="up(this)">
<div id=d1 moveFlag=0 style="position:absolute;top:000;left:000;width:100;height:100;background-color:blue;">d1</div>
<div id=d2 moveFlag=0 style="position:absolute;top:000;left:300;width:100;height:100;background-color:yellow;">d2</div>
<div id=d3 moveFlag=0 style="position:absolute;top:200;left:300;width:100;height:100;background-color:green;">d3</div>
</div>
</body>
<button onclick="clk()">右端对齐</button>
<script language="javascript">
var moveFunc = null;
var moveObj = null;
var upFunc = null;
var upObj = null;
function bodyMove(){
if(moveObj==null) return;
moveFunc(moveObj);
}

function bodyUp(){
if(upObj==null) return;
upFunc(upObj);
upObj = null;
upFunc = null;
moveFunc = null;
moveObj = null;
}
function down(obj){
if(event.srcElement.tagName!="DIV") return;
if(obj==event.srcElement) return;
if(event.srcElement.moveFlag==0){
event.srcElement.moveFlag=1;
event.srcElement.oldX = event.clientX;
event.srcElement.oldY = event.clientY;
moveFunc = move1;
moveObj = event.srcElement;
upFunc = up1;
upObj = event.srcElement;
}
if(event.shiftKey){
event.srcElement.style.border = "3px outset";
event.srcElement.moveFlag=2;
}else{
event.srcElement.style.border = "";
};
event.cancelBubble = true;
}
function up(obj){
if(!event.shiftKey){
event.srcElement.moveFlag = 0;
event.srcElement.oldX = 0;
event.srcElement.oldY = 0;
}
event.cancelBubble = true;
}
function up1(obj){
if(obj.moveFlag!=2){
obj.moveFlag = 0;
obj.oldX = 0;
obj.oldY = 0;
}
}
function move(obj){
if(event.srcElement.tagName!="DIV") return;
if(obj==event.srcElement) return;
if(event.srcElement.moveFlag==1){
event.srcElement.style.left = event.clientX - event.srcElement.oldX+parseInt(event.srcElement.style.left);
event.srcElement.style.top = event.clientY - event.srcElement.oldY+parseInt(event.srcElement.style.top);
event.srcElement.oldX = event.clientX;
event.srcElement.oldY = event.clientY;
if(event.srcElement.getBoundingClientRect().top<event.srcElement.parentElement.getBoundingClientRect().top){
event.srcElement.style.top = 0;
}
if(event.srcElement.getBoundingClientRect().left<event.srcElement.parentElement.getBoundingClientRect().left){
event.srcElement.style.left = 0;
}
if(event.srcElement.getBoundingClientRect().bottom>event.srcElement.parentElement.getBoundingClientRect().bottom){
event.srcElement.style.top = event.srcElement.parentElement.clientHeight - event.srcElement.clientHeight;
}
if(event.srcElement.getBoundingClientRect().right>event.srcElement.parentElement.getBoundingClientRect().right){
event.srcElement.style.left = event.srcElement.parentElement.clientWidth - event.srcElement.clientWidth;
}
}
event.cancelBubble = true;
}
function move1(obj){
if(obj.moveFlag==1){
obj.style.left = event.clientX - obj.oldX+parseInt(obj.style.left);
obj.style.top = event.clientY - obj.oldY+parseInt(obj.style.top);
obj.oldX = event.clientX;
obj.oldY = event.clientY;
if(obj.getBoundingClientRect().top<obj.parentElement.getBoundingClientRect().top){
obj.style.top = 0;
}
if(obj.getBoundingClientRect().left<obj.parentElement.getBoundingClientRect().left){
obj.style.left = 0;
}
if(obj.getBoundingClientRect().bottom>obj.parentElement.getBoundingClientRect().bottom){
obj.style.top = obj.parentElement.clientHeight - obj.clientHeight;
}
if(obj.getBoundingClientRect().right>obj.parentElement.getBoundingClientRect().right){
obj.style.left = obj.parentElement.clientWidth - obj.clientWidth;
}
}
event.cancelBubble = true;
}
function clk(){
var leftPos = 9999;
var top1 = 9999;
var top2 = -1;
var num = 0;
for(var i=0;i<d.children.length;i++){
if(d.children[i].moveFlag==2){
if(leftPos>parseInt(d.children[i].style.left))leftPos=parseInt(d.children[i].style.left);
if(top1>parseInt(d.children[i].style.top))top1=parseInt(d.children[i].style.top);
if(top2<parseInt(d.children[i].style.top))top2=parseInt(d.children[i].style.top);
num++;
}
}
if(num<1) return;
var lPos = (top2-top1)/(num-1);
num = 0;
for(var i=0;i<d.children.length;i++){
if(d.children[i].moveFlag==2){
d.children[i].style.left = leftPos;
d.children[i].style.top = top1 + num;
num+=lPos;
}
}
}
</script>
最好你能自己总结，写出根容易维护的代码，我还比较忙，只能到这了
beihua 2003-06-05
  • 打赏
  • 举报
 回复
我试了一下，还是不行呀？

"右对齐或左对齐，上对齐可不可以自动地将第一个选择的层作为基准,而不是固定在d1上"
比如现在要做"左对齐",我按下shift键不放,分别选择d2,d1,d3,那么按常规应该是d1,d3以d2为基准,即d1,d3的左边框的横坐标与d2左边框的横坐标相同。

而当我选择的顺序发生变化时，比如现在的顺序变成:我按下shift键不放,分别选择d3,d2,d1,
那么得到的结果应该是以d3为基准,即d2,d1的左边框的横坐标与d3左边框的横坐标相同。

其实我说的这个效果就是平常我们经常使用的，问题的关键:怎样捕捉"选择的层的顺序",不知道我说明白没有？
大虾帮我!
blues-star 2003-06-05
  • 打赏
  • 举报
 回复
以后的都好办了吧？
blues-star 2003-06-05
  • 打赏
  • 举报
 回复
<BODY>
判断keyFlag可以判断出是否按下Shift键，按住Shift并点鼠标。<br>
<font color="red"><span id="a"></span></font>
<script>
var keyFlag = false;

document.body.onkeydown = function(){ if (event.keyCode == 16) keyFlag = true };
document.body.onkeyup = function(){ keyFlag = false };
document.body.onclick = function(){ a.innerText = keyFlag };
</script>
</BODY>


这个是判断是否按住Shift点鼠标的代码。
jsidiot 2003-06-04
  • 打赏
  • 举报
 回复
我解决第一个问题
第二个问题原因在于第一个问题上面
第三个问题是由于鼠标拖动太快，导致离开d2层，目前我还没有找到好得解决办法：p
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<div id=d style="position:absolute;top:50;left:50;width:700;height:500;background-color:red;"
onmousedown="down(this)" onmousemove="move(this)" onmouseup="up(this)">
<div id=d1 moveFlag=0 style="position:absolute;top:000;left:000;width:100;height:100;background-color:blue;">d1</div>
<div id=d2 moveFlag=0 style="position:absolute;top:000;left:300;width:100;height:100;background-color:yellow;">d2</div>
<div id=d3 moveFlag=0 style="position:absolute;top:200;left:300;width:100;height:100;background-color:green;">d3</div>
</div>
<button onclick="clk()">右端对齐</button>
<script language="javascript">
function down(obj){
if(event.srcElement.tagName!="DIV") return;
if(obj==event.srcElement) return;
if(event.srcElement.moveFlag==0){
event.srcElement.moveFlag=1;
event.srcElement.oldX = event.clientX;
event.srcElement.oldY = event.clientY;
}
if(event.shiftKey){
event.srcElement.style.border = "3px outset";
event.srcElement.moveFlag=2;
}else{
event.srcElement.style.border = "";
};
event.cancelBubble = true;
}
function up(obj){
if(!event.shiftKey){
event.srcElement.moveFlag = 0;
event.srcElement.oldX = 0;
event.srcElement.oldY = 0;
}
}
function move(obj){
if(event.srcElement.tagName!="DIV") return;
if(obj==event.srcElement) return;
if(event.srcElement.moveFlag==1){
event.srcElement.style.left = event.clientX - event.srcElement.oldX+parseInt(event.srcElement.style.left);
event.srcElement.style.top = event.clientY - event.srcElement.oldY+parseInt(event.srcElement.style.top);
event.srcElement.oldX = event.clientX;
event.srcElement.oldY = event.clientY;
if(event.srcElement.getBoundingClientRect().top<event.srcElement.parentElement.getBoundingClientRect().top){
event.srcElement.style.top = 0;
}
if(event.srcElement.getBoundingClientRect().left<event.srcElement.parentElement.getBoundingClientRect().left){
event.srcElement.style.left = 0;
}
if(event.srcElement.getBoundingClientRect().bottom>event.srcElement.parentElement.getBoundingClientRect().bottom){
event.srcElement.style.top = event.srcElement.parentElement.clientHeight - event.srcElement.clientHeight;
}
if(event.srcElement.getBoundingClientRect().right>event.srcElement.parentElement.getBoundingClientRect().right){
event.srcElement.style.left = event.srcElement.parentElement.clientWidth - event.srcElement.clientWidth;
}
}
}
function clk(){
var leftPos = d.children[0].style.left;
alert(leftPos)
for(var i=1;i<d.children.length;i++){
if(d.children[i].moveFlag==2){
alert(d.children[i].moveFlag)
if(leftPos==-1) leftPos = parseInt(d.children[i].style.left);
if(leftPos!=-1) d.children[i].style.left = leftPos;
}
}
}
</script>

</BODY>
</HTML>
beihua 2003-06-04
  • 打赏
  • 举报
 回复
to rocsnake(dp) and all:
我试了一下，发现以下几个问题：
1＞右对齐可不可以自动地将第一个选择的层作为基准,而不是固定在d1上
2＞右对齐时d3覆盖到了d2上
3＞拖动的动作不好用，层拖到一半有时就停下来，不动了。移动一段时间之后，松开鼠标左键，层仍旧被拖动

我还有一个类似问题，"在可编辑的iframe区域中怎样在"大层"的右侧从上到下并排放置"小层?不想用表格定位"
请见http://expert.csdn.net/Expert/topic/1873/1873025.xml?temp=.7598993

由于时间紧迫,哪位大虾能解决这两个问题马上放200分!!!
xizi2002 2003-06-04
  • 打赏
  • 举报
 回复
你可看看这里的源代码
http://yu.40it.com
beihua 2003-06-04
  • 打赏
  • 举报
 回复
to rocsnake(dp):
你能不能把我说的那三个问题修改一下呀？
帮忙帮到底吧。
特别是“右对齐可不可以自动地将第一个选择的层作为基准,而不是固定在d1上”怎么解决？

多谢！
beihua 2003-06-04
  • 打赏
  • 举报
 回复
终于有高手出现了。我试一下，如果能用就放分！
rocsnake 2003-06-04
  • 打赏
  • 举报
 回复
休要处理


<div id=d style="position:absolute;top:50;left:50;width:700;height:500;background-color:red;"
onmousedown="down(this)" onmousemove="move(this)" onmouseup="up(this)">
<div id=d1 moveFlag=0 style="position:absolute;top:000;left:000;width:100;height:100;background-color:blue;">d1</div>
<div id=d2 moveFlag=0 style="position:absolute;top:000;left:300;width:100;height:100;background-color:yellow;">d2</div>
<div id=d3 moveFlag=0 style="position:absolute;top:200;left:300;width:100;height:100;background-color:green;">d3</div>
</div>
<button onclick="clk()">右端对齐</button>
<script language="javascript">
function down(obj){
if(event.srcElement.tagName!="DIV") return;
if(obj==event.srcElement) return;
if(event.srcElement.moveFlag==0){
event.srcElement.moveFlag=1;
event.srcElement.oldX = event.clientX;
event.srcElement.oldY = event.clientY;
}
if(event.shiftKey){
event.srcElement.style.border = "3px outset";
event.srcElement.moveFlag=2;
}else{
event.srcElement.style.border = "";
};
event.cancelBubble = true;
}
function up(obj){
if(!event.shiftKey){
event.srcElement.moveFlag = 0;
event.srcElement.oldX = 0;
event.srcElement.oldY = 0;
}
}
function move(obj){
if(event.srcElement.tagName!="DIV") return;
if(obj==event.srcElement) return;
if(event.srcElement.moveFlag==1){
event.srcElement.style.left = event.clientX - event.srcElement.oldX+parseInt(event.srcElement.style.left);
event.srcElement.style.top = event.clientY - event.srcElement.oldY+parseInt(event.srcElement.style.top);
event.srcElement.oldX = event.clientX;
event.srcElement.oldY = event.clientY;
if(event.srcElement.getBoundingClientRect().top<event.srcElement.parentElement.getBoundingClientRect().top){
event.srcElement.style.top = 0;
}
if(event.srcElement.getBoundingClientRect().left<event.srcElement.parentElement.getBoundingClientRect().left){
event.srcElement.style.left = 0;
}
if(event.srcElement.getBoundingClientRect().bottom>event.srcElement.parentElement.getBoundingClientRect().bottom){
event.srcElement.style.top = event.srcElement.parentElement.clientHeight - event.srcElement.clientHeight;
}
if(event.srcElement.getBoundingClientRect().right>event.srcElement.parentElement.getBoundingClientRect().right){
event.srcElement.style.left = event.srcElement.parentElement.clientWidth - event.srcElement.clientWidth;
}
}
}
function clk(){
var leftPos = -1;
for(var i=0;i<d.children.length;i++){
if(d.children[i].moveFlag==2){
if(leftPos==-1) leftPos = parseInt(d.children[i].style.left);
if(leftPos!=-1) d.children[i].style.left = leftPos;
}
}
}
</script>
beihua 2003-06-04
  • 打赏
  • 举报
 回复
难道就没有人会吗？
rocsnake 2003-06-04
  • 打赏
  • 举报
 回复
我上面的四个汉字写错了，是需要修改，我只是给你提供了一个基本的解决办法，当然还不完善，则需要好生的控制DIV和BODY的事件
beihua 2003-06-04
  • 打赏
  • 举报
 回复
急呀!!!!!!!!!!
beihua 2003-06-04
  • 打赏
  • 举报
 回复
to rocsnake(dp) and all:
我试了一下，发现以下几个问题：
1＞右对齐可不可以自动地将第一个选择的层作为基准,而不是固定在d1上
2＞右对齐时d3覆盖到了d2上
3＞拖动的动作不好用，层拖到一半有时就停下来，不动了。移动一段时间之后，松开鼠标左键，层仍旧被拖动

我还有一个类似问题，"在可编辑的iframe区域中怎样在"大层"的右侧从上到下并排放置"小层?不想用表格定位"
请见http://expert.csdn.net/Expert/topic/1873/1873025.xml?temp=.7598993

由于时间紧迫,哪位大虾能解决这两个问题马上放200分!!!
《是男人就下100层》真的有隐藏剧情！B站up主数月破解
B站UP主揭示《是男人就下100层》隐藏剧情，追踪至1990年杂志线索，历经数月与原作者互动，发现游戏背后的故事和8192层塔的秘密。
清华男生是怎样凭白卷得100分的{杨振宁出题}，超强！！！
此内容讲述清华男生凭白卷在杨振宁出题的考试中得100分一事，但未提及具体原因。
HRBUST 2575 是男人就下100层
文章讨论了一个名为《是男人就下100层》的游戏，玩家需要在给定规则下通过移动浮板获取积分，通过动态规划方法解决在特定条件下到达底层并获取最大积分的问题。
十七: 简单层,激活函数层,Affine/Softmax层的实现
本文用Python实现了神经网络中的简单层、激活函数层和Affine/Softmax层。简单层包括乘法层和加法层；激活函数层实现了ReLU层和Sigmoid层；Affine/Softmax层涵盖Affine层、批版本的Affine层以及Softmax-with-Loss层，还介绍了各层的正向和反向传播。
[VB.NET]100分求助！！！急！！！！！！！！！！！！！！！
解决VB编程中使用Access数据库的查询问题，通过调整SQL语句的构造方式，实现了基于多个TEXT控件输入的条件查询。
JavaScript

87,987

社区成员

224,683

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章