- 論壇徽章:
- 0
|
DHTML API,圖片和層的拖放
這是一個(gè)基于瀏覽器的JavaScript DHTML庫(kù)，它可以為你的圖像和層增加拖放功能，并且擴(kuò)展了DHTML的能力。
要想把圖像和層加到可拖放的DHTML的條目里，只需要簡(jiǎn)單地把它們的名稱或ID放到這個(gè)庫(kù)的主函數(shù)“SET_DHTML()” 。
可選命令允許你改變或自定義拖放條目的形為，有多種方式可以選擇。例如，你可以限制一個(gè)可拖放條目能夠被移動(dòng)多遠(yuǎn)的距離，可以指定光標(biāo)的樣式，或者增加可拖放圖片。這個(gè)DHTML庫(kù)很容易理解和使用。它提供了很多方法，如moveTo()，resizeTo()，hide()和show()，也可以在你的頁(yè)面里面copy()圖片，還有很多。每個(gè)DHTML條目都有很多屬性，如x,y,w,h,z,defx,defy,defw,defh,defz()，還有很多，無(wú)論何時(shí)你都可以使用這些屬性。例如，要保存當(dāng)前可拖放條目的位置，你可以將它的x和y屬性寫到一個(gè)表單的隱藏字段里，然后傳送到服務(wù)器端。要看詳細(xì)情況，可以參考DHTML AIP和commands的文檔。
用Resize來(lái)替代Drag?
當(dāng)wz_dragdrop.js在運(yùn)行時(shí)，你可以按下<Shift>鍵不放，當(dāng)拖放那些可拖放條目時(shí)，我們按下<Shift>鍵不放，可以讓wz_dragdrop.js工作在Resize模式而不是Drag模式。這個(gè)功能通過對(duì)SET_DHTML()調(diào)用一個(gè)RESIZEABLE命令就可以激活。
如何加入可拖放的腳本?
1、HTML 文件：可拖放元素的名稱
圖像：每個(gè)想要可拖放的圖像都應(yīng)有一個(gè)唯一的name。例如：
<div id="name2" style="position:absolute;...">Content</div>
2、將代碼加到HTML文件里
將下面這行代碼放到你的HTML文件里的<body>里，注意，必須放到<body>后。
js 代碼
<script type="text/javascript" src="wz_dragdrop.js"></script>
下面這些代碼放到</body>之前。
js 代碼
<script type="text/javascript">
SET_DHTML("name1", "name2", "anotherLayer", "lastImage");
</script>
從這個(gè)例子中可以看出，我們只要簡(jiǎn)單地將可拖放元素的名稱傳給SET_DHTML( )，用引號(hào)和逗號(hào)分開它們就可以了。這些名稱的順序是任意的
。
3、保存腳本文件
下載這個(gè)庫(kù)文件，解壓它，將wx_dragdrop.js放到你的網(wǎng)站目錄下。根據(jù)你放的位置，適當(dāng)?shù)卣{(diào)整
js 代碼
<script type="text/javascript" src="wz_dragdrop.js"></script>
中src的路徑。 字串1
4、保存transparent.gif圖片
在你下載的文件里包括了這個(gè)圖片，它對(duì)于Netscape 4來(lái)說是必須的，它用來(lái)產(chǎn)生空白的空間。如果你用的是IE，則不用考慮。
附錄:
· Optional Commands: http://www.walterzorn.com/dragdrop/commands_e.htm
· DHTML API, Scripting Drag Drop Items: http://www.walterzorn.com/dragdrop/api_e.htm
· Examples using the DHTML API : http://www.walterzorn.com/dragdrop/demos/demos.htm
css 代碼
<img name="name1" src="someImg.jpg" width="240" height="135">
width和height必須要有設(shè)置，最好是絕對(duì)值，不要設(shè)為什么“50%”之類的。
層：每個(gè)層都要有一個(gè)唯一的ID，這一點(diǎn)與圖像相反，圖像是必須要在name屬性。必須指定位置，相對(duì)和絕對(duì)值都可以。 |
|
免費(fèi)注冊(cè)
發(fā)表于 2008-07-29 14:20