2010-01-24 118 views
3

我實際上正在嘗試創建一個.php頁面,我將在其中拖動3個可拖動元素,每個拖動元素可拖動到一個可拖放元素,而他們是獨一無二的,所以每個droppable只會接受一定的可拖動。在拖動後多次拖放JQuery:事件後拖動

事情是我需要控制所有的元素已被拖到正確的位置,在這種情況下,我應該將用戶重定向到success.php,否則,如果某些元素被拖動到錯誤的droppable,用戶必須去例如failure.php。

是否有無論如何在PHP中保存$ _SESSION中的某個值,以便知道所有可拖動的元素都被放在正確的位置?

這是拖&下降代碼:

$(function() { 
    $("#draggableLeiden").draggable(); 
    $("#draggableTheHague").draggable(); 
    $("#draggableRotterdam").draggable(); 

    $("#droppableLeiden").droppable({ 
     accept: '.imgLeiden', 
     drop: function(event, ui) 
     { 
      $(this).addClass('ui-state-highlight'); 

     } 
    }); 
    $("#droppableTheHague").droppable({ 
     accept: '.imgTheHague', 
     drop: function(event, ui) 
     { 
      $(this).addClass('ui-state-highlight'); 

     } 
    }); 
    $("#droppableRotterdam").droppable({ 
     accept: '.imgRotterdam', 
     drop: function() 
     { 
      $(this).addClass('ui-state-highlight'); 
      //var activeClass = $(this).droppable('option', 'activeClass','ui-state-highlight'); 
     } 
    }); 
}); 

我試圖例如讓活動類可投放的元素,看它是否「UI狀態高亮」匹配做到這一點,但實際上,該標籤將在每次頁面重新加載時執行,因此如果我嘗試將任何代碼插入到
,則爲drop:function() 它將始終執行。

非常感謝!

+0

我工作的一個解決方案。我回到家後會再發帖。 – 2010-01-26 17:03:50

回答

1

改爲使用revert選項。當一個可拖動的元素被放置在除了被接受的可拖拽元素之外的任何東西上時,它將會滑回原來的位置。這對你有用嗎?

+0

不完全是這樣,因爲用戶不應該使用試驗和錯誤,所以最好的做法是根據他採取的行動將用戶發送到另一個頁面。 但是非常感謝您的幫助! – noloman 2010-01-24 22:38:22

1

您是否偶然尋找ui.draggable它擁有被丟棄的元素?

http://jqueryui.com/demos/droppable/

$('#target').droppable({ 
    drop : function(event,ui){ 
      if($(ui.draggable).attr('id') == "correcttarget") 
      { 
        window.location = "yay.php"; 
      } 
      else 
      { 
        window.location = "awwww.php"; 
      } 
    } 
}) 
+0

是啊,那可能工作!但是如何將這三個可拖動對象放到他們正確的可拖放對象上時將其轉到某個網頁? – noloman 2010-01-31 19:40:09

+0

@noloman保留一個全局變量,一個條件數組或一個簡單的計數器,檢查是否有3個成功,將它添加到'correcttarget'分支'counter ++; if(counter == 3){/ * action here */}' – 2010-02-01 00:02:54