標題: 請問JQuery的draggable用法 [打印本頁]
作者: test155 時間: 2010-4-28 10:19 標題: 請問JQuery的draggable用法
$(".Place").draggable({
connectToSortable: '#Sort',
helper: 'clone',
revert: 'invalid'
});
如果用draggable拖曳到一個div到list裡面，我又想從list拖曳出來並取消拖曳的div。
是要再寫一個draggable嗎?
作者: wmh 時間: 2010-4-28 20:30
回復 1# test155
嗯，應該是需要。
作者: test155 時間: 2010-4-29 08:59
本帖最後由 test155 於 2010-4-29 10:08 編輯
如果我再寫一個draggable功能，原本的功能就會影響到。
那改用droppable不知可不可以寫出來？
還是要再寫一個list存放不要的div，或者在拖曳到另一個list的div上增加移除div？
作者: wmh 時間: 2010-4-29 21:28
這樣講不太清楚，有沒有實際的例子說明呢？
作者: test155 時間: 2010-4-29 22:00
本帖最後由 test155 於 2010-4-29 22:16 編輯
我先寫好拖拉功能
$(".Place").draggable({
connectToSortable: '#Sort',
helper: 'clone',
revert: 'invalid' });
我把div物件托放到list上ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 10px;}
我現在想從list上移除這個div物件
如果我再寫一個draggable功能不就是會和上面的功能影響到？
我想在list1拖拉到list2中的div物件，往外框拖拉出去，就有取消div物件的功能。
或者說在list2的div物件中，增加一個移除的按鈕？
<div id=List_1>
<h2>List_1</h2>
<ul>
<div id="L1" class="Place">L1</div>
</ul>
</div>
<div id=List_2>
<h2>List_2</h2>
<ul>
<div id="L2" class="Place2">L2</div>
</ul>
</div>
作者: wmh 時間: 2010-4-29 23:40
嗯，這樣有比較清楚了，我本來以為你要把 list2 內的項目拖曳回 list1 時，把 list1 的給刪掉... 
這樣的話還是可以在拖曳到 list2 後，動態變成為 dragable 物件，讓他可以再被拖曳，至於要拖曳到哪裡算是刪除，就看你的設計囉。
作者: test155 時間: 2010-4-30 17:49
我想在list2裡面的div物件，拖拉出去後即可移除。
不知這樣怎寫，還看不太懂ui。
作者: wmh 時間: 2010-4-30 23:31
回復 7# test155
拖曳到 #list2 之後，把新的 li 也建立為 draggable 物件即可拖曳。並設定為拖曳到 body 就刪除。
$("#list1 li").draggable({helper: 'clone',revert: true});
$("#list2").droppable({
accept: '#list1 li, #list2 li',
drop: function(ev, ui) {
if (ui.draggable.parent().attr("id") == "list2") {
var $a = $(ui.draggable);
} else {
var $a = $(ui.draggable).clone();
}
$(this).append($a);
$a.draggable();
}
});
$('body').droppable({
accept: '#list2 li',
drop: function(ev, ui) {
$a = $(ui.draggable);
$(this).append($a);
$a.remove();
}
});
作者: test155 時間: 2010-5-1 10:17
如果在同一個容器拖動、排序，不就會重複clone？
該用containment作判斷嗎？
作者: wmh 時間: 2010-5-1 22:01
嗯，所以我的程式中有一段 if else 就是在做這件事。
至於實做內容就看你的實際需要。
作者: test155 時間: 2010-5-1 23:14
本帖最後由 test155 於 2010-5-2 00:56 編輯
$("list2").sortable({revert: true});
$("list1 .Place").draggable({
connectToSortable: 'list2',
helper: 'clone',
revert: 'invalid',
scroll: false});
我加了排序功能後，變成只要在list2進行排序，就會多clone一個div物件
作者: wmh 時間: 2010-5-2 08:34
所以你從 #list2 拖曳出來時不能 clone 喔...
作者: test155 時間: 2010-5-2 09:04
我想從list2的物件作排序，可是一排序完就會多複製一個。
作者: wmh 時間: 2010-5-2 09:08
請參考我先前的範例
作者: test155 時間: 2010-5-2 10:27
本帖最後由 test155 於 2010-5-15 19:03 編輯
似乎又失敗了...
同一個容器進行排序就會clone...
慢慢思考去
作者: wmh 時間: 2010-5-2 12:56
你這情況又不太一樣，sortable 本身就會複製，所以你的 list2 只需要針對來自list1 的做複製。
另外你 JavaScript 內的 id 打錯，不用加上 #
if (ui.draggable.parent().attr("id") != "list2") {
var $a = $(ui.draggable).clone();
$(this).append($a);
$a.draggable();
}
作者: test155 時間: 2010-5-2 13:33
嗯，謝謝指導
作者: test155 時間: 2010-5-2 14:46
我用IE8瀏覽和Firefox瀏覽，IE8不能使用物件移除功能，所以還要再寫一個IE8能用的移除功能嗎？
作者: test155 時間: 2010-5-2 20:58
本帖最後由 test155 於 2010-5-2 21:25 編輯
用GOOGLE瀏覽器，有時不能正常顯示。
剛把後面加上移除類別、資料，再給空資料。
$a.remove().removeClass().removeData().empty();
就能解決IE8的問題了...
作者: test155 時間: 2010-5-6 23:02
本帖最後由 test155 於 2010-5-6 23:04 編輯 $("#list1 .Place").draggable({helper: 'clone',revert: 'invalid',scroll: false});
$("#list2").droppable({
accept: '#list1 .Place, #list2 .Place',
drop: function(ev, ui) {
if (ui.draggable.parent().attr("id") == "list2") {
var $a = $(ui.draggable);
} else {
var $a = $(ui.draggable).clone();
}
$(this).append($a);
$a.draggable();
}
});
$('body').droppable({
accept: '#list2 .Place',
drop: function(ev, ui)
{
$a = $(ui.draggable);
$(this).append($a);
$a.empty();
}
});我想把a變成空值，並且能讓list1的place取代，是要用哪種方法寫？
是要取拖動的框框嗎？
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|