Posts tagged drag

[iPhone 開発メモ] 画像をドラッグする

5
5830日
by in iPhone/iPod touch

画面に表示された画像を指でドラッグする方法です。

UIImageView クラスを継承した DragView クラスを作成する。

@interface DragView : UIImageView {
	CGPoint startLocation;
}

@end

@implementation DragView

- (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
	startLocation = [[touches anyObject] locationInView:self];
	[[self superview] bringSubviewToFront:self];
}

- (void) touchesMoved:(NSSet*)touches withEvent:(UIEvent*)event
{
	CGPoint pt = [[touches anyObject] locationInView:self];
	CGRect frame = [self frame];
	frame.origin.x += pt.x - startLocation.x;
	frame.origin.y += pt.y - startLocation.y;
	[self setFrame:frame];
}

@end;

(続きを読む…)

Firefox3 インストール

5
6000日
by in Firefox, Uncategorized

Firefox3 が公開されました。24 時間最多ダウンロードソフトとしての世界記録挑戦ということで貢献するためにも、早速ダウンロードしてインストールしてみました。

Download Day - Japanese

うわさ通り、表示はかなり速くなっているのが体感できます。
あと、ロケーションバーから履歴を検索できるのが便利です。
(続きを読む…)

scriptaculous.js を使ってマトリックス状に配置した要素を並び替える

1
6173日
by in Ajax, JavaScript

scriptaculous.js を使って並び替えを行う を応用して格子状に並んだ要素を並び替える例です。基本的な部分はリスト形式の並び替えと同じですので省略します。
最初にデモ、その後にコードを紹介します。

デモ


#sortarea { width: 350px; } #sortarea div { float: left; width: 100px; height: 70px; border: 1px solid #000; margin: 5px; text-align: center; padding-top: 30px; cursor: default; }

A1
A2
A3
A4
A5
A6
A7
A8
A9

ソートする要素

前回は li タグで要素を定義しましたが、今回は div タグで定義しました。
CSS で格子状に並ぶようにしています。

<style>
#sortarea {
width: 350px;
}

#sortarea div {
float: left;
width: 100px;
height: 70px;
border: 1px solid #000;
margin: 5px;
text-align: center;
padding-top: 30px;
cursor: default;
}
</style>

<div id="sortarea">
<div id="drag_1">A1</div>
<div id="drag_2">A2</div>
<div id="drag_3">A3</div>
<div id="drag_4">A4</div>
<div id="drag_5">A5</div>
<div id="drag_6">A6</div>
<div id="drag_7">A7</div>
<div id="drag_8">A8</div>
<div id="drag_9">A9</div>
</div>

ソートする JavaScript コード

Sortable.create の option に overlap:’horizontal’ を指定しなくても並び替えはできますが、少しぎこちない感じになりますので、指定しておいたほうがいいでしょう。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    tag:'div',overlap:'horizontal',constraint: false,
});
// ]]>
</script>

scriptaculous.js を使って並び替えを行う

2
6173日
by in Ajax, JavaScript

JavaScript の読み込み

まず prototype.js と scriptaculous.js を読み込む

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>

ソートするリストを作成する

ここでのポイントはドラッグさせたい要素に drag_1 のように「共通の名前+アンダバー+数字」を付けることです。

<ul id="sortarea">
<li id="drag_1">A1</li>
<li id="drag_2">A2</li>
<li id="drag_3">A3</li>
<li id="drag_4">A4</li>
<li id="drag_5">A5</li>
<li id="drag_6">A6</li>
<li id="drag_7">A7</li>
<li id="drag_8">A8</li>
<li id="drag_9">A9</li>
</ul>

ソートする JavaScript コード

ソートするエリアとソートする要素を定義した後で実際にソートするための JavaScript コードを書く。このコードがソートさせたい要素よりも前に書くとエラーになるので注意。

<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("sortarea",{
    onUpdate:function(){
        new Ajax.Updater(
        'sortarea',
        '/path/to/phpcode',
            {
                asynchronous:true,
                evalScripts:true,
                parameters:Sortable.serialize("sortarea")
            }
        );
    }
});
// ]]>
</script>

onUpdate でソート結果をPHP に送りデータベースなりに反映させる。
データベースに反映などが必要なければ、onUpdate は不要です。

デモ

これを実際に使用した例が下記になります。

#sortarea { width: 350px; border: 1px solid #000; } #sortarea li { cursor: default; }

  • LIST1
  • LIST2
  • LIST3
  • LIST4
  • LIST5
  • LIST6
  • LIST7
  • LIST8
  • LIST9

ドラゴンベアード DX810 購入

1
6232日
by in その他

Dragon Beard DX810

久しぶりに靴を購入。ドラゴンベアードの DX810 というやつです。

ドラゴンベアードの靴を探す

Go to Top