拖拽网页制作
A. HTML如何制作可以拖动的网页窗口(就在本页面)例如百度的登录框
B. 各位网页制作高手，谁能给我一个可以拖拽的div（我在jsp文件中使用）
<script type="text/javascript">
function $(id){ return document.getElementById(id);}
function moveEvent(e,id){
var isIE = (document.all)?true:false;
//navigator.userAgent.toLowerCase().indexOf("msie") != -1;
var e=window.event||e;
var drag = true;
var xx=isIE?e.x:e.pageX;
var yy=isIE?e.y:e.pageY;
var L = $(id).offsetLeft;
var T = $(id).offsetTop;
var _parent = $(id).parentNode;
$(id).onmousemove = function(e) {
var e=window.event||e;
if (drag) {
getOpacity($(id),50);
x=isIE?e.x:e.pageX; if(x<0)x=0;
y=isIE?e.y:e.pageY; if(y<0)y=0;
$(id).style.left = L-xx+x+"px";
$(id).style.top = T-yy+y+"px";
}
}
$(id).onmouseup=function(){
getOpacity($(id),100);
$(id).style.cursor = "default";
drag = false;
}
}
function getOpacity(node,level){
if(document.all){
node.style.filter = 'alpha(opacity='+level+')';
} else {
node.style.opacity = level/100;
}
}
window.onload=function(){
$("test").onmousedown = function(e){
this.style.cursor = "move";
this.style.position = "absolute";
e=window.event || e;
moveEvent(e,"test");
}
}
</script>
<style type="text/css">
#test{background-color:#FF0;border:1px solid darkred;color:darkblue;width:250px;text-align:center;height:60px;line-height:60px;z-index:9999;}
</style>
<div id="test">test for the drag</div>
C. 怎么在网页制作拖拽的拼图效果
如何在网页中做一个拼图的效果？ 其实要做到这点并不困难，只需要使用到Dreamweaver一个简单的指令。 步骤一:要找到一张完整，而且色彩鲜明的图片。这样便于他人识别。 步骤二:使用一些软件将他们均匀的分割，并将他们分别命名为*.jpg或*.gif图片。我推荐使用Friework或Photoshop。 步骤三:进入Dreamweaver打开一个相应文件。 步骤四:单击对象工具栏中的层(Layer)，在页面中脱拽一个层。 步骤五:把鼠标固定在层框中，同时点击工具拦中的图片插入按钮，插入一张你先前分割的一张图片。 步骤六:按键盘F8，弹出Behaviors面板，在Events For:。选择IE 4.0。 步骤七:选中页面中的层，然后单击面板中的+键，系统弹出列表，选择其中的Drag Layer。 步骤八:此时弹出的框子，选择层(Layer)的时候时候一定选择当前层。(如果不是很清楚，按F11)。其他的设置可以不去动他的默认。按OK。 步骤九: 随后点击事件右侧的向下的黑色小箭头，在弹出的列表中选择onMouseOver。 这样一个可以拖拽的图象就建成了，你可以save一下。用浏览器打开相应的HTML文件试一试。
D. 求可拖拽编辑的网页编辑器可拖拽哦
有一个名叫 Antenna 的层编辑网页工具很不错，主要就是使用鼠标拖拽实现，用熟练后能制作出相当漂亮的网页。
E. DW怎么做鼠标拖拽网页
在网上，我们经常可以看到一些非常实用的拖拽效果，特别是应用于网上购物时，访问者直接就可以把选中的物品拖拽到购物箱或者购物车里，非常方便、有趣。不过大多数人不知道，其实用Dreamweaver中的Behaviors也可以做出同样的效果来。如果你有兴趣，就和我一起来制作一个具有拖拽效果的的购物箱吧！
在做拖拽效果的网页之前，首先我们要准备一些图片。比如用作购物箱或购物车的一张大图片，外加几张代表物品的小图片。我在这儿准备了一个购物袋，还有几样物品，它们分别是：手机、游戏手柄和汽车(哇！汽车也可以拖进购物袋中啊！)。
准备好了图片，就可以开始我们的工作了。打开Dreamweaver，新建一个页面，在对象面板中选择图层工具，然后用鼠标在页面上拖出一个图层来(或者选择“Insert/Layer”，插入一个新层)。然后，把鼠标放进层中，再选择“对象/插入图像工具”，在此图层中插入刚才准备好的一个图片。
重复上面的动作，再接着插入3个图层，然后在此3个图层中分别插入你准备好的另外几张图片。完成后效果如图1。
好了，重要的一步来了。点击“窗口/动作”，会弹出“动作(Behaviors)”对话框来，如图2。点击对话框上方的“+”号后，会再弹出一个菜单，选择此菜单中的“DragLayer”，接着再弹出的，就是“DragLayer”对话框了，如图3。
好了，重要的一步来了。点击“窗口/动作”，会弹出“动作(Behaviors)”对话框来，如图2。点击对话框上方的“+”号后，会再弹出一个菜单，选择此菜单中的“DragLayer”，接着再弹出的，就是“DragLayer”对话框了，如图3。
图2
在此对话框中可以分别设置几个图层的属性。我们把插入购物袋图像的那个图层设置为“不可移动层(Unconstrained)”，其余的几个图层设置为“可移动层(Constrained)”。在此对话框上还有一个“Advanced”选项，点击它，在此面板上勾选“WhenDrag”选项，然后再把“Ringlayertofront，then”选项设定为“Restoredz-index”就可以了。
图3
重复上述步骤，分别设置好其他几个图层的属性，设置好的“Behaviors”对话框的中间文本框中多出了4个“onLoad”标记。
好了，设置完这些，我们的工作也完成了，别忘了保存网页，然后按下“F12”键，看看你做的拖动页面酷不酷？
F. 网页图片拖拽功能的实现
document.onmousemove=function(e){
if(isDraging===true){
varnowX=e.pageX-startX;
varnowY=e.pageY-startY;
oDrag.style.left=nowX+'px';
oDrag.style.top=nowY+'px';
returnfalse;//重新触发
}
}addEventListener有兼容问题换document.onmousemove这种形式也可以自己试下问题不大
G. 怎样用Dreamweaver制作拖拽效果
在网上，我们经常可以看到一些非常实用的拖拽效果，特别是应用于网上购物时，访问者直接就可以把选中的物品拖拽到购物箱或者购物车里，非常方便、有趣。不过大多数人不知道，其实用Dreamweaver中的Behaviors也可以做出同样的效果来。如果你有兴趣，就和我一起来制作一个具有拖拽效果的的购物箱吧!
在做拖拽效果的网页之前，首先我们要准备一些图片。比如用作购物箱或购物车的一张大图片，外加几张代表物品的小图片。我在这儿准备了一个购物袋，还有几样物品，它们分别是：手机、游戏手柄和汽车(哇!汽车也可以拖进购物袋中啊!)。
准备好了图片，就可以开始我们的工作了。打开Dreamweaver，新建一个页面，在对象面板中选择图层工具，然后用鼠标在页面上拖出一个图层来(或者选择“Insert/Layer”，插入一个新层)。然后，把鼠标放进层中，再选择“对象/插入图像工具”，在此图层中插入刚才准备好的一个图片。
重复上面的动作，再接着插入3个图层，然后在此3个图层中分别插入你准备好的另外几张图片。完成后效果如图1。
图1
好了，重要的一步来了。点击“窗口/动作”，会弹出“动作(Behaviors)”对话框来，如图2。点击对话框上方的“+”号后，会再弹出一个菜单，选择此菜单中的“Drag
Layer”，接着再弹出的，就是“Drag
Layer”对话框了，如图3。
图2
在此对话框中可以分别设置几个图层的属性。我们把插入购物袋图像的那个图层设置为“不可移动层(Unconstrained)”，其余的几个图层设置为“可移动层(Constrained)”。在此对话框上还有一个“Advanced”选项，点击它，在此面板上勾选“When
Drag”选项，然后再把“Ring
layer
to
front，then”选项设定为“Restored
z-index”就可以了。
图3
重复上述步骤，分别设置好其他几个图层的属性，设置好的“Behaviors”对话框的中间文本框中多出了4个“onLoad”标记。
好了，设置完这些，我们的工作也完成了，别忘了保存网页，然后按下“F12”键，看看你做的拖动页面酷不酷?
H. 网页中怎么实现拖拽
我只告诉你原理 代码自己写或者找下吧
页面上一个DIV display:absolute; 让他浮动起来
然后给此DIV一个鼠标按下事件 mousedown 当按下的时候 在给document文档一个鼠标移动事件
mousemove 当移动的时候 获取鼠标当前的坐标值 然后赋给DIV的TOP和LEFT 他就移动了
在给document一个鼠标抬起事件 mouseup 当弹起的时候 把 document 的移动和抬起事件都取消了
至此就完成了一套拖拽动作
不过中间你还需要优化操作
比如按下的位置相对于DIV边框的距离 这样才可以点击哪里 哪里就跟这移动 而不是只是左上角跟这移动。。。
I. 谁推荐一款网页设计工具，直接可视化拖动模块建站
dreamweaver DW呀 下个模板 套模板 你做前端设计的 只能这样了 现在市面上没有你说的这种软件 但是ui界面设计 有你说的这种交互软件 也只用于展示效果 直接建站的没有