jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

標題: 請問div覆蓋 [打印本頁]

作者: test155 時間: 2010-5-12 08:48 標題: 請問div覆蓋

本帖最後由 test155 於 2010-5-12 09:06 編輯

body

<body>
<div id=Main>
        <div id=ListA1>
            <div id=accordion>
                        <h2>E</h2>
                        <div id=list1>
                                <div id="e1" class="A1">E(1)</div>
                                <div id="e2" class="A1">E(2)</div>
                                <div id="e3" class="A1">E(3)</div>
                        </div>
                             <h2>P</h2>
                        <div id=list1>
                                <div id="p1" class="A1">P(1)</div>
                                <div id="p2" class="A1">P(2)</div>
                                <div id="p3" class="A1">P(3)</div>
                        </div>
                        <h2>S</h2>
                        <div id=list1>
                                <div id="s1" class="A1">S(1)</div>
                                <div id="s2" class="A1">S(2)</div>
                                <div id="s3" class="A1">S(3)</div>
                        </div>
            </div>
        </div>
            
        <div id=ListA2>
                        <h2>ListA2</h2>
                        <div id=list2>
                                <div id="St" class="A2">Start</div>
                                <div id="e1" class="A1">E(1)</div>
                                <div id="e2" class="A1">E(2)</div>
                                <div id="e3" class="A1">E(3)</div>
                                <div id="p1" class="A1">P(1)</div>
                                <div id="p2" class="A1">P(2)</div>
                                <div id="p3" class="A1">P(3)</div>
                                <div id="s1" class="A1">S(1)</div>
                                <div id="s2" class="A1">S(2)</div>
                                <div id="s3" class="A1">S(3)</div>
                        </div>
        </div>
</div>

</body>

css

@charset "utf-8";
/* CSS Document */


h2 {
        border-bottom: #f6f6f6 2px solid;
        margin: 5px;
        text-align: center;
        color: #0033FF;
        cursor: pointer;
}

#Main {
        text-align: center; 
        margin: 0px auto; 
        width: 600px; 
        height: 560px;
}
        
#ListA1 {
        background-color: #dedede; 
        width: 250px; 
        float: left;
}

#ListA2 {
        background-color: #dedede;
        width: 250px;
        float: right;
        min-height: 560px;
}
        
.A1 {
        border-top: #999 1px solid;
        border-bottom: #999 1px solid;
        border-right: #999 1px solid;
        border-left: #999 1px solid;
        text-align: center;
        line-height: 40px;
        background-color: #00FF66;
        margin: 5px auto;
        width: 200px;
        height: 40px;
        cursor: move;
}        
        
.A2 {
        border-top: #999 1px solid;
        border-bottom: #999 1px solid;
        border-right: #999 1px solid;
        border-left: #999 1px solid;
        text-align: center;
        line-height: 40px;
        background-color: #99FF00;
        margin: 5px auto;
        width: 200px;
        height: 40px;
        cursor: move;
}        
        
#list1 #list2 { 
        list-style-type: none; 
        margin: 0; 
        padding: 0; 
        margin-bottom: 10px;
}

JavaScript

// JavaScript Document

$(function() {        
                   $(".A1").draggable({
                                        helper: 'clone',
                                        revert: 'invalid',
                                        scroll: false
                                        });
                   
                   $("#list2").droppable({
                                        accept: '.A1',
                                        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 .A1',
                                        drop: function(ev, ui) 
                                        {
                                          $a = $(ui.draggable);
                                          $a.empty().addClass('A2');
                                        }
                                        });

                   $("#accordion").accordion({collapsible: true});        
});

我拖拉到body把它變成空值。

如果我想再從list1的A1物件，拖拉到空值物件上覆蓋

是如何取值和不會讓他在堆疊？

在$(".A1").draggable再加上判斷嗎？
if (ui.draggable.parent().attr("class") == "A2")

作者: wmh 時間: 2010-5-13 08:52

你可以直接提供完整的頁面嗎？這樣我會比較容易看你的問題
如果沒有空間可放，可以試著放到 http://jsfiddle.net/

作者: test1555 時間: 2010-5-13 16:38

回復 2# wmh

我放到BOX上
BOX

作者: wmh 時間: 2010-5-13 22:35

你這樣的 UI 是蠻特別的，你 #list2 雖然看起來是清空，但是實際 item 仍存在，
因此若要從 #list1 拖曳過來要覆蓋，你可以試著作成拖曳後，判斷若放到空 item 上面，
則不複製物件，而是把被覆蓋的物件改掉～

作者: test155 時間: 2010-5-15 11:42

我想寫成

如果list2的物件data為空，則list1的物件能覆蓋。

然後再寫list2的物件能交換data，也就是互換物件位置，而不會排到最下面

...

作者: test155 時間: 2010-5-16 19:47

本帖最後由 test155 於 2010-5-16 20:46 編輯

回復 4# wmh

原本在list2下的div，怎取值和覆蓋？

$(this).text();
這樣是取整排，想要只取其中一個空值的div

作者: wmh 時間: 2010-5-17 23:39

你現在是拖曳到 #list2 上面，無法判斷是拖曳到哪個 item 上，所以如果你要這樣做，得把空的 item 也變成 dropable 才行...

或是改變做法，應該有其他更好的方式，可以再想看看～～

作者: test155 時間: 2010-5-18 18:18

回復 7# wmh

$a.empty().removeAttr("id").addClass("Start");

那我在變空值的同時也給予可托放的功能呢？

作者: wmh 時間: 2010-5-18 22:46

可以試試看，不過這樣的設計沒有很好。

作者: test155 時間: 2010-5-19 00:19

本帖最後由 test155 於 2010-5-19 07:21 編輯

回復 9# wmh

那怎樣寫才會在body，增加空值可droppable

$("body").droppable({
                                  accept: '#list2 .Place',
                                  drop: function(ev, ui) 
                                  {
                                     $a = $(ui.draggable);
                                     $a.empty().removeAttr("id").addClass("Start");
                                  }
                                 });

是直接在drop上加上?

$a.droppable();

怎取要被覆蓋的值？
一直取不到list2要被覆蓋的值，只能取第一個

$('div.Place',this).attr('id');

作者: wmh 時間: 2010-5-19 22:08

這樣的流程做起來問題很多，建議你還是先想清楚，流程都順了再實做～

作者: test155 時間: 2010-5-19 22:32

回復 11# wmh

那被覆蓋物件的取值語法怎寫

$('div.Place',list2).attr('id');

這樣只能取list2的第一個
我想取滑鼠移到的位置

作者: wmh 時間: 2010-5-19 23:38

回復 12# test155

以你目前的做法應該是沒辦法取得被覆蓋的物件...

作者: test155 時間: 2010-5-20 08:15

回復 13# wmh

嗯...要把list2改成一格一格的嗎?

作者: wmh 時間: 2010-5-20 08:35

你可以找找看自己想做的功能，有沒有別人做過類似的，然後再參考他的流程或程式碼。
不然自己創造出奇怪的 UI，會容易陷入不知所謂的迷思～～

作者: test155 時間: 2010-5-20 10:18

回復 15# wmh

嗯...我想想看，我也覺得我流程怪怪
謝謝提醒

歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/)