static void OnReady()
{
// there's the gallery and the trash
gallery = new jQuery("#gallery");
trash = new jQuery("#trash");
// let the gallery items be draggable
new jQuery("li", gallery).draggable(new DraggableOptions
{
cancel = "a.ui-icon", // clicking an icon won't initiate dragging
revert = "invalid", // when not dropped, the item will revert back to its initial position
containment = new jQuery("#demo-frame").length.As <bool>() ? "#demo-frame" : "document", // stick to demo-frame if present
helper = "clone",
cursor = "move"
});
// let the trash be droppable, accepting the gallery items
trash.droppable(new DroppableOptions
{
accept = "#gallery > li",
activeClass = "ui-state-highlight",
drop = (e, ui) => deleteImage(ui.draggable)
});
// let the gallery be droppable as well, accepting items from the trash
gallery.droppable(new DroppableOptions
{
accept = "#trash li",
activeClass = "custom-state-active",
drop = (@event, ui) => recycleImage(ui.draggable)
});
// resolve the icons behavior with event delegation
new jQuery("ul.gallery > li").click(e =>
{
var item = new jQuery(JsContext.@this);
var target = new jQuery(e.target);
if (target.@is("a.ui-icon-trash"))
{
deleteImage(item);
}
else if (target.@is("a.ui-icon-zoomin"))
{
viewLargerImage(target);
}
else if (target.@is("a.ui-icon-refresh"))
{
recycleImage(item);
}
JsContext.@return(false);
});
}