jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 » JavaScript 討論 » 請問JQuery的draggable用法

test155 發表於 2010-4-28 10:19

請問JQuery的draggable用法

[code]
        $(".Place").draggable({
                connectToSortable: '#Sort',
                helper: 'clone',
                revert: 'invalid'
        });
[/code]如果用draggable拖曳到一個div到list裡面，我又想從list拖曳出來並取消拖曳的div。

是要再寫一個draggable嗎?

wmh 發表於 2010-4-28 20:30

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1203&ptid=413]1#[/url] [i]test155[/i] [/b]

嗯，應該是需要。

test155 發表於 2010-4-29 08:59

[i=s] 本帖最後由 test155 於 2010-4-29 10:08 編輯 [/i]

如果我再寫一個draggable功能，原本的功能就會影響到。
那改用droppable不知可不可以寫出來？

還是要再寫一個list存放不要的div，或者在拖曳到另一個list的div上增加移除div？

wmh 發表於 2010-4-29 21:28

這樣講不太清楚，有沒有實際的例子說明呢？

test155 發表於 2010-4-29 22:00

[i=s] 本帖最後由 test155 於 2010-4-29 22:16 編輯 [/i]

我先寫好拖拉功能[code]
$(".Place").draggable({
                connectToSortable: '#Sort',
                helper: 'clone',
                revert: 'invalid'        });
[/code]我把div物件托放到list上[code]ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        margin-bottom: 10px;}
[/code]我現在想從list上移除這個div物件

如果我再寫一個draggable功能不就是會和上面的功能影響到？

我想在list1拖拉到list2中的div物件，往外框拖拉出去，就有取消div物件的功能。
或者說在list2的div物件中，增加一個移除的按鈕？[code]
<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>
[/code]

wmh 發表於 2010-4-29 23:40

嗯，這樣有比較清楚了，我本來以為你要把 list2 內的項目拖曳回 list1 時，把 list1 的給刪掉... :dizzy:

這樣的話還是可以在拖曳到 list2 後，動態變成為 dragable 物件，讓他可以再被拖曳，至於要拖曳到哪裡算是刪除，就看你的設計囉。

test155 發表於 2010-4-30 17:49

我想在list2裡面的div物件，拖拉出去後即可移除。
不知這樣怎寫，還看不太懂ui。

wmh 發表於 2010-4-30 23:31

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1217&ptid=413]7#[/url] [i]test155[/i] [/b]

拖曳到 #list2 之後，把新的 li 也建立為 draggable 物件即可拖曳。並設定為拖曳到 body 就刪除。

[code js]
$("#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();
    }
});
[/code]

test155 發表於 2010-5-1 10:17

如果在同一個容器拖動、排序，不就會重複clone？
該用containment作判斷嗎？

wmh 發表於 2010-5-1 22:01

嗯，所以我的程式中有一段 if else 就是在做這件事。
至於實做內容就看你的實際需要。

test155 發表於 2010-5-1 23:14

[i=s] 本帖最後由 test155 於 2010-5-2 00:56 編輯 [/i]

[code]
$("list2").sortable({revert: true});
                       
$("list1 .Place").draggable({
        connectToSortable: 'list2',
        helper: 'clone',
        revert: 'invalid',
        scroll: false});
[/code]我加了排序功能後，變成只要在list2進行排序，就會多clone一個div物件

wmh 發表於 2010-5-2 08:34

所以你從 #list2 拖曳出來時不能 clone 喔...

test155 發表於 2010-5-2 09:04

我想從list2的物件作排序，可是一排序完就會多複製一個。

wmh 發表於 2010-5-2 09:08

請參考我先前的範例 :dizzy:

test155 發表於 2010-5-2 10:27

[i=s] 本帖最後由 test155 於 2010-5-15 19:03 編輯 [/i]

似乎又失敗了...

同一個容器進行排序就會clone...

慢慢思考去:time:

wmh 發表於 2010-5-2 12:56

你這情況又不太一樣，sortable 本身就會複製，所以你的 list2 只需要針對來自list1 的做複製。
另外你 JavaScript 內的 id 打錯，不用加上 #

[code js]
if (ui.draggable.parent().attr("id") != "list2") {
    var $a = $(ui.draggable).clone();
    $(this).append($a);
    $a.draggable();
}
[/code]

test155 發表於 2010-5-2 13:33

嗯，謝謝指導:'(

test155 發表於 2010-5-2 14:46

我用IE8瀏覽和Firefox瀏覽，IE8不能使用物件移除功能，所以還要再寫一個IE8能用的移除功能嗎？

test155 發表於 2010-5-2 20:58

[i=s] 本帖最後由 test155 於 2010-5-2 21:25 編輯 [/i]

用GOOGLE瀏覽器，有時不能正常顯示。:'(

剛把後面加上移除類別、資料，再給空資料。[code]
$a.remove().removeClass().removeData().empty();
[/code]就能解決IE8的問題了...:D

test155 發表於 2010-5-6 23:02

[i=s] 本帖最後由 test155 於 2010-5-6 23:04 編輯 [/i]

[code]$("#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();
                                }
                                });[/code]我想把a變成空值，並且能讓list1的place取代，是要用哪種方法寫？

是要取拖動的框框嗎？

查看完整版本: 請問JQuery的draggable用法