拖拽網頁製作
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界面設計 有你說的這種交互軟體 也只用於展示效果 直接建站的沒有