[Javascript]「JavaScript/Flash/HTML 5 でスパゲッティコードにならないためのモダン設計入門」写経 第2弾
「JavaScript/Flash/HTML 5 でスパゲッティコードにならないためのモダン設計入門」写経 - @ikikko のはてなダイアリーに引き続き。今日は第4章をやってみました。今回も、仕様だけを頭に入れて、極力本誌を見ずに実装。
この章で身に付けたいものは、二つ。
- リッチなUIの実装方法(ドラッグ&ドロップ可能なコンポーネント)
- 状態管理の考え方
で、結論から言うと、かなり中途半端。いったんはナイーブな方法で実装してその次に状態管理を考えたものを作ろうとして、一応できた。けどちょっとイレギュラーなことをやるとすぐにバグるし、状態管理の方は途中で集中力が切れたんで未完成…><
もう考えるのもめんどくなってきたので、ナイーブな実装方法だけでもとりあえず晒しておきます。。。
- 作者: 桜井雅史,縣俊貴,伊藤直也,ミック,高林哲,小飼弾,羽生章洋,角田直行,はまちや2,岡野原大輔,西田圭介,青木靖,川口耕介,井奥雄一,冨田慎一,森田創,鶴岡直也,長野雅広,武者晶紀,WEB+DB PRESS編集部
- 出版社/メーカー: 技術評論社
- 発売日: 2009/10/24
- メディア: 大型本
- 購入: 6人 クリック: 190回
- この商品を含むブログ (37件) を見る
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Web+DB Vol.53 State</title> <link rel="stylesheet" type="text/css" href="./mvc-state.css" /> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script> <script src="mvc-state-naive.js"></script> <!-- <script src="mvc-state.js"></script> --> </head> <body onselectstart="return false;" onmousedown="if (typeof event.preventDefault != 'undefined') { event.preventDefault(); }"> <ul id="list"> <li>Item-1</li> <li>Item-2</li> <li>Item-3</li> <li>Item-4</li> <li>Item-5</li> </ul> <span id="drag-item">test</span> </body> </html>
#list li { cursor: pointer; font-size: 20px; } #drag-item { display: none; background: yellow; alpha: 0.5; z-index: 99; position: absolute; font-size: 20px; } .drag-over { border-bottom: 2px dashed #777; background: #FED; }
$(function() { var isMousedown = false; var selectItem; // --------------- Helper function --------------------- // function onDrag(event) { selectItem = $(event.target).css("border", "dotted"); isMousedown = true; } function offDrag() { selectItem.css("border", "none"); isMousedown = false; } function displayDragItem(event) { $("#drag-item").css( { "display" : "inherit", "top" : event.pageY + 10, "left" : event.pageX + 10 }).text(selectItem.text()); } function noDisplayDragItem() { $("#drag-item").css("display", "none"); } function overItem(event) { $(event.target).addClass("drag-over"); } function noOverItem(event) { $(event.target).removeClass("drag-over"); } // --------------- Event function --------------------- // // マウスを押したとき $("#list li").mousedown(function(event) { onDrag(event); displayDragItem(event); }); // マウスカーソルが重なったとき $("#list li").mousemove(function(event) { if (isMousedown) { displayDragItem(event); overItem(event); } }); // マウスカーソルが離れたとき $("#list li").mouseout(function(event) { if (isMousedown) { noOverItem(event); } }); // マウスを離したとき $("#list li").mouseup(function(event) { offDrag(); noDisplayDragItem(); noOverItem(event); $(event.target).after(selectItem); }); });