請問div覆蓋(頁 1) - JavaScript 討論 - jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化

test155 發表於 2010-5-12 08:48

請問div覆蓋

[i=s] 本帖最後由 test155 於 2010-5-12 09:06 編輯 [/i]

body[code]
<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>
[/code]css[code]
@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;
}
[/code]JavaScript[code]
// 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});
});
[/code]我拖拉到body把它變成空值。

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

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

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

wmh 發表於 2010-5-13 08:52

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

test1555 發表於 2010-5-13 16:38

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1250&ptid=421]2#[/url] [i]wmh[/i] [/b]

我放到BOX上
[url=http://www.box.net/shared/dbnh3n8kou]BOX[/url]

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

[i=s] 本帖最後由 test155 於 2010-5-16 20:46 編輯 [/i]

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1252&ptid=421]4#[/url] [i]wmh[/i] [/b]

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

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

wmh 發表於 2010-5-17 23:39

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

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

test155 發表於 2010-5-18 18:18

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1267&ptid=421]7#[/url] [i]wmh[/i] [/b][code]$a.empty().removeAttr("id").addClass("Start");[/code]那我在變空值的同時也給予可托放的功能呢？

wmh 發表於 2010-5-18 22:46

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

test155 發表於 2010-5-19 00:19

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

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1275&ptid=421]9#[/url] [i]wmh[/i] [/b]

那怎樣寫才會在body，增加空值可droppable[code]
$("body").droppable({
                              accept: '#list2 .Place',
   drop: function(ev, ui)
   {
      $a = $(ui.draggable);
      $a.empty().removeAttr("id").addClass("Start");
   }
   });
[/code]是直接在drop上加上?[code]$a.droppable();[/code]怎取要被覆蓋的值？
一直取不到list2要被覆蓋的值，只能取第一個[code]$('div.Place',this).attr('id');[/code]

wmh 發表於 2010-5-19 22:08

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

test155 發表於 2010-5-19 22:32

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1314&ptid=421]11#[/url] [i]wmh[/i] [/b]

那被覆蓋物件的取值語法怎寫[code]$('div.Place',list2).attr('id');[/code]這樣只能取list2的第一個
我想取滑鼠移到的位置

wmh 發表於 2010-5-19 23:38

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

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

test155 發表於 2010-5-20 08:15

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1319&ptid=421]13#[/url] [i]wmh[/i] [/b]

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

wmh 發表於 2010-5-20 08:35

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

test155 發表於 2010-5-20 10:18

[b]回復 [url=http://jsgears.com/redirect.php?goto=findpost&pid=1321&ptid=421]15#[/url] [i]wmh[/i] [/b]

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

頁: [1]

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

請問div覆蓋