2010-01-24 120 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