多个接受 Jquery UI Droppable

Question

大家好，我有 2 个可拖动的 div #schedule 和 #events 以及一个可放置的 div #droppable。我想要做的是，当我将#schedule 放到#droppable 时，它​​会重定向到某个页面，例如 schedule.php，#events 也是如此。任何人都可以给我一个示例代码吗？提前谢谢。

Answer 1

Droppable 有一个名为 'drop' 的事件，当接受的可拖动对象被拖放到 droppable 上时会触发该事件。您可以在创建 droppable 时为此事件指定处理程序。

事件处理程序的签名是'function(event, ui)'。 'ui' 参数将有一个名为 'draggable' 的属性，该属性又将有一个名为 'context' 的属性。最后一个属性表示您可以从中检索元素 ID 的底层 HTML 元素。

然后您可以使用此值切换到相应的页面（例如使用 window.location.href）。

以下示例代码显示了使用事件处理程序创建（基本）可放置对象：

$('#droppable').droppable({
    drop: function(event, ui) {
       var id = ui.draggable.context.id;
       window.location.href = id + '.php';
    }
});