【卜維丰】Javascript Drag&Drop

Javascript 拖、拉、放

名稱：	圖層的 Drag&Drop
語法：	Javascript / CSS
適用：
說明：	圖層數不限可以指定圖層固定不可拖拉自動調整 z-index 自動貼齊格點(本例格點50pixel)
備註：	Woking in HTML 4.x

實作範例

卜維丰 1/26 07'

同意轉載，不過麻煩看一下轉載需知

卜維丰 2010/3/27 上午 11:34:00

MIA, 當然可以, 不過作法不是三語兩言能講完的

MIA 2010/3/25 下午 06:58:00

對了我是用Dreamweaver寫 HTML

用了jquery的API
draggadle 仍然不能移動<select><option>裡面的值

MIA 2010/3/25 下午 06:53:00

老師您好：
我最近想寫一個
有兩個ListBox 中間有兩個button，很簡單
不過希望兩個ListBox之間的值可以用按鈕也可以用拖曳的方式，有可能用javascript或是jquery來控制嗎??

試過很多範例，但都只能移動div 或是img
難道<select><option>或是ListBox就不行嗎??
請老師解答！！

小漾 2009/12/25 下午 04:48:00

老師！您好
因為最近要開發，像igoogle那樣的
可以任易移動框架然後儲存的效果~~
只要管理者能做到這樣排版的效果.

我曉得ajax可以做到!可是公司使用的
是ASP　不是ASP.NET

不曉得,您的"重新認識javascript"
的書是否有相關方面的資訊？？？

seo 2009/7/31 下午 10:38:00

謝謝老師的詳細講解...

卜維丰 2009/7/27 下午 06:29:00

新手, 有個地方
pop() 執行完, 原陣列隨之改變
原本 da.length=5
pop 一次變4, pop 兩次變3... 所以, 無法執行 5 次

新手 2009/7/22 下午 03:08:00

老師您好,我做問題七的時候用
var de=new Array();
var da=['a','b','c','d','e'];
for(i=0;i<=da.length-1;i++){
de[i]=da.pop();
}
這樣只能取出三個值,可是我改用shift就可以將所有的值取出,這個是為什麼??
還是我程式哪裡有錯誤

allen 2009/7/20 下午 06:48:00

老師您好,
請問一下,
1.例如:投票模組
2.從甲網頁的拖拉到乙網頁
如何實作?
3.謝謝賜教!

p/s:不必嵌入語法,就可以執行.

卜維丰 2008/9/3 下午 03:05:00

tno, 你 aspx 裡有個 iframe, 這時 iframe 是這頁的 child frame, 所以用 opener 是不對的

使用 iframe 相當於跨視窗, 我會建議你為 iframe 加一個 name 屬性, 例如 name="editor1___Frame"

如果加上去了, 我沒有實作, 但按原理來說, 應該是
window.frrames['editor1___Frame'].document.formName.xEditingArea

這裡我要強調一件事, 看來, 你在 iframe 裡放的是表單, 基於不同理由, 都支持表單元件一定要使用 name 屬性, 同時, 本身 form 就是一個元件, 不用再繞一圈去使用 document.getElementById , 這點你可以實作一下, 有問題或結果再通知我

tno 2008/9/2 下午 02:53:00

老師您好想請問你一個問題，
我的a.aspx 裡面有一個
<iframe id="editor1___Frame" src="../post/editor.html?InstanceName=editor1&>

我該如何把值傳入iframe 裡的控制項?
(PS.editor.html裡的控制項ID=xEditingArea)

我試過
document.getElementById("editor1___Frame")
和
window.opener.document.all
和
window.opener.document.main
都沒辦法，所以請老師幫幫我

阿粘 2008/6/12 上午 11:45:00

感謝老師的解答，我想我知道該怎麼做了。

卜維丰 2008/6/11 下午 04:45:00

阿粘, 其實你看上面 iframe 裡的 source , 有一段叫作 hitTest()

只不過我好像沒有用在程式裡, 基本上, 用 JavaScript 作 hitTest(), 我自己想的方法, 也只能針對座標進行判別

至於你提到的 Panic Goods 他的購物車在最下面, 這就比較好判斷, 你拉曳時的座標, Y 值超過了, 就算 hit 了, 你可以試試

阿粘 2008/6/11 上午 11:37:00

老師您好：

請問老師在Javascript中是否有類似您所提到的Flash方法hitTest()可以使用，或有沒有什麼可以取代方式來判斷2個物件是否已經碰觸?

舉例來說：我想做到像YAHOO新版信箱中，可將信件拖曳至垃圾筒中刪除；或如您的出版「解決AJAX一定會遇到的90個問題」中第17章中提到的Panic Goods網站裡的拖曳式AJAX購物車範例。

卜維丰 2008/5/30 上午 11:15:00

大仔, 先講儲存位置這事好了
你可以送出前, 進行一輪計算目前所有屬於可以拖曳物件的座標, 再儲存
要不, 你可以邊拖曳邊把座標放在隱藏欄位中

再說第二個, Flash 裡有個 hitTest(), 就是指兩個物件有接觸, 你可以用類似概念, 在 onmouseup 時啟動

同樣的, 這些動作, 我建議都有一個隱藏欄位在記錄, 直接送出, 最後提醒你, 座標回傳值有單位 px, 資料庫欄位型態要注意

大仔 2008/5/30 上午 06:23:00

剛剛問的問題太抽象，應該是說我是要從我的資料庫抓圖片出來而每個大框框當成相簿，裡面每個元素當成相片，當我把一個元素拖到另一個大框框裡時，就等於移動相片到另個相簿，請問老師，我該如何做儲存的動作?

大仔 2008/5/30 上午 06:14:00

老師您好請問Drag&Drop 功能，可以儲存嗎?
就是說當拖拉完，點一個按鈕，可以把剛剛拖拉之後的位置給儲存起來嗎?

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

Javascript 拖、拉、放

實作範例

以下為文章回應區