- PR -

Ajaxについての質問

1
投稿者投稿内容
まさお
常連さん
会議室デビュー日: 2007/11/06
投稿数: 38
投稿日時: 2008-02-06 10:02
お世話になります。

ASP.NET & Ajaxにて以下のようなことは可能ですか？

二つのGridViewがあります。
一つは人名一覧みたいなもので、一つはタスク（１行が１job）のGridViewだとします。

その人名一覧から一人をドラッグアンドドロップで、もう一つのGridViewのセルに登録するといったことは可能でしょうか？

[例] タスクのGrid
行番 時間 仕事　　　 担当　　　
---------------------------------------
1 9:00〜9:30 トイレ掃除 山田太郎
…

上の例で言うと、担当のところに人をドラッグアンドドロップして登録する。

可能でしょうか？不可能でしょうか？

可能であれば、こうゆうような技術を使ったサイトはありますでしょうか？

宜しくお願いします。


どっとねっとふぁん
ぬし
会議室デビュー日: 2005/02/23
投稿数: 935
投稿日時: 2008-02-06 10:26
可能か不可能か、ということなら可能なんじゃないでしょうか。
ただ、とっても苦労するんじゃないかと思いますが。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-02-07 02:51
フォームPOSTが制限されている場所で作ったので現物投稿できないのがアレですが・・・

結構イベント処理が大変ですよ。
HTML/JavaScript の場合、Drag & Drop は、onmousedown/onmousemove/onmouseup で
実現するのですが、onmousedown でonmousemove を登録して onmouseup で onmousemove
を無効にします。ドラッグ中の行イメージにフォーカスがあたるようにしておかないと
通常のマウスドラッグ操作における範囲選択状態になってしまいますから、これまた
マウスポインタの扱いがシビアになります。
ドラッグ＆ドロップ　−　マウスボタン押下したまんま対象テーブルの落としたい位置で
マウスボタンを離して、その位置（行）の直前に挿入。ドラッグ元の行はそれと同時に削除する。
クリック＆クリック　−　元テーブルの移動したい行をクリック、移動先で再度クリックで挿入＆削除。挿入・削除は上と同じやり方。

ドラッグ＆ドロップはどーゆーことか分かると思いますが、
クリック＆クリックって何よ？なんですけど、要するに、イベント処理が大変、に
繋がるところでして、元テーブルの行をドラッグします。Windowの枠外にマウス
をドラッグすると、、、、まぁ、普通に考えると、んじゃ、bodyに onmouseout でも
仕掛ければいいだけでしょ？ってなるのですが、いろんなところに無意味とも思える
イベントをたくさん動的に設定してあげないとダメなんです。ドロップしちゃまずい
部分にドロップしたときは？とか、その他色々。


で、GridViewの仕組みから、<input type=hidden> の決められた名前で動的に挿入された行を作成しなくちゃならんのですよね。

まぁ、適当に作ったものですが、理解できて、GridViewの動きに支障が無い程度にマージできるならば、ここに載せてもいいですけど。



＞可能であれば、こうゆうような技術を使ったサイトはありますでしょうか？
知りません。努力でどーとでもなりそうな悪寒がします。


努力と気合で。
ドラッグして、ドロップした瞬間にポストバックしちゃうってのもありかと
思いますが、これはこれでなんだか情けない仕様というか、歯がゆいですよね。
画面上で出来る操作は全部やって、アクションボタン押したら、サーバーサイド
で変更を一括で更新できる方が HTML/JavaScript の醍醐味？が出ていいかと
考えますが、さて・・・？？

Ajax 使うのだから、Accessみたいに入力と同時に
DB更新みたいなことやりたいってことかな？もしかして。
ならレスポンスが早ければいいけど、遅れちゃうととんでもないことになりそう
で結構怖い。

使うイベントは、
元テーブルの各行に、onmosedown
先テーブルの各行に、onmouseup
body に、onmousemove, onmouseout
その他に、onmouseover
FireFox3.0 から導入された elementFromPoint が大活躍します。
DOMでは、cloneNode,replaceNode 等が頻繁に出てきます。
CSS は、ハーフトーンのドラッグ中イメージを作成するために、
IE では、filter:alpha を、Firefox では、-moz-opacity だっけ？
使いますね。

JavaScriptを３００行くらい書いても、身入りの少ない、無意味な仕様
だと考えます。上？と相談されて再検討してみた方がよろしいかと愚考
します。




[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-02-07 03:03 ]

[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-02-07 03:10 ]
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2008-02-07 07:17
AjaxDataControlsのGridViewを使うことになるでしょうね。

CodePlexからソースコードがダウンロードできます。
http://www.codeplex.com/AjaxDataControls/Release/ProjectReleases.aspx?ReleaseId=8312

_________________
ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集
まさお
常連さん
会議室デビュー日: 2007/11/06
投稿数: 38
投稿日時: 2008-02-07 11:13
引用:

ぴあちゃんさんの書き込み (2008-02-07 02:51) より:

まぁ、適当に作ったものですが、理解できて、GridViewの動きに支障が無い程度にマージできるならば、ここに載せてもいいですけど。


載せていただけたらありがたいです。

引用:

Accessさんの書き込み (2008-02-07 07:17) より:

AjaxDataControlsのGridViewを使うことになるでしょうね。



AjaxDataControlsのGridViewの特性といいますか、普通のGridViewとの違いってどうゆうとこにあるのでしょうか？

ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-02-08 02:08
しょーもないサンプルですな。
紫色のテーブルの先頭の色が付いている行でマウスボタンダウン。
緑のハーフトーンイメージが出たらそのままドラッグ。
上のピンクのテーブルの名前欄でマウスボタンアップ。
で、挿入されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>Item Drag And Drop Demo</TITLE>
<SCRIPT>
function getElement(o, tagName) {
tagName = tagName.toLowerCase();
while (o && o.tagName && o.tagName.toLowerCase() != tagName)
o = o.parentNode;
return o;
}


function setDragEvents() {
var tbl = document.getElementById("dragTable");
var tbody = tbl.getElementsByTagName("tbody")[0];

for (var i=0;i < tbody.childNodes.length;i++) {
var tr = tbody.childNodes[i];
tr.childNodes[0].onmousedown = function() {
createDragImage(event.srcElement, event.x, event.y);
}
}
}
function cancelDrag() {
drgImage = null;
document.getElementById("dragImageArea").innerHTML = "";
}
function dropItem() {
if (dragImage != null) {
dragImage.style.display = "none";
var td = document.elementFromPoint(event.x, event.y);

if (td.tagName.toLowerCase() != "td") {
cancelDrag();
return ;
}
var name = dragImage.innerText;
var tr = td.parentNode;

if (tr.parentNode.tagName.toLowerCase() != "tbody") {
cancelDrag();
return ;
}

if (td.cellIndex != 3) {
cancelDrag();
return ;
}

td.innerText = name;

cancelDrag();

return ;
}
}

var dragImage = null;
function createDragImage(o,x,y) {
var tr = getElement(o,"tr");
var tbody = getElement(event.srcElement, "tbody");
var idx = tr.rowIndex;
var span = document.createElement("span");
span.className = "dragImage";

span.innerHTML = "<b>" + tr.cells[2].innerText + "</b>";
dragImage = span;
span.style.left = (x - 10) + "px";
span.style.top = (y - 10) + "px";
document.getElementById("dragImageArea").appendChild(span);
}
function dragMove() {
document.getElementById("messageArea").innerHTML = event.x + "::" + event.y;

if (dragImage) {
dragImage.style.left = (event.x - 10) + "px";
dragImage.style.top = (event.y - 10) + "px";
}
}
window.onload = function() {
setDragEvents();
}
</SCRIPT>
<STYLE>
.dragImage {
background-color:lime;
color:red;
filter:alpha(opacity=70);
position:absolute;
z-index:10;
padding-left:20px;
}
</STYLE>
</HEAD>
<BODY style="margin:20px;">

<div style="border:outset 4px #34FD69;width:640px;height:400px;"
onmousemove="dragMove()" onmouseup="dropItem()">
<table border="1" cellspacing=0 cellpadding=0 style="table-layout:fixed;" id="dropTable">
<colgroup>
<col width="20px" style="background-color:pink" />
<col width="40px" />
<col width="240px" />
<col width="140px" />
</colgroup>
<thead>
<tr>
<th></th>
<th>No</th>
<th>Description</th>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=4 id="messageArea">Comments</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>便所掃除</td>
<td style="cursor:hand;"><span>&nbsp;</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>2</td>
<td>風呂掃除</td>
<td style="cursor:hand;"><span>&nbsp;</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>3</td>
<td>庭掃除</td>
<td style="cursor:hand;"><span>&nbsp;</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>4</td>
<td>外壁掃除</td>
<td style="cursor:hand;"><span>&nbsp;</span></td>
</tr>
</tbody>
</table>
<hr />
<table border="1" cellspacing=0 cellpadding=0 style="table-layout:fixed;" id="dragTable">
<colgroup>
<col width="20px" style="background-color:#DEADCB" />
<col width="40px" />
<col width="140px" />
</colgroup>
<thead>
<tr>
<th></th>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan=3>このテーブルからＤｒａｇできます。</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>田中一郎</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>2</td>
<td>高橋健一</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>3</td>
<td>大黒屋総佐ヱ門</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>4</td>
<td>大森猛</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>5</td>
<td>小泉強固</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>6</td>
<td>野村良子</td>
</tr>
</tbody>
</table>
<p>下のテーブルの各行どこでもドラッグ出来ます。ドラッグしたら上のテーブルの任意の位置でドロップして下さい。</p>
<div id="dragImageArea"></div>
</div>
</BODY>
</HTML>

なんか変だな・・・
まぁ、いいか。
適当につまんでくらはい。



[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-02-08 02:15 ]
Access
ぬし
会議室デビュー日: 2002/04/08
投稿数: 829
投稿日時: 2008-02-08 06:10
>AjaxDataControlsのGridViewの特性といいますか、普通のGridViewとの違いってどうゆうとこにあるのでしょうか？

ASP.NETのサーバーコントロールと異なりブラウザのクライアント側で処理します。
Webサーバーとは、WebサービスまたはPageMethodでやりとりします。

AjaxDataControls版のGridViewを利用すると、下のデモのように
GridViewの列見出しをドラッグ＆ドロップして入れ替えるといったことが簡単に実装できます。

http://dotnetslackers.com/projects/AjaxDataControls/GridView/DragNDrop.aspx

上記デモ版を表示したら、列見出し「Title」をドラッグして先頭の列に移動してみてください


_________________
ASP.NET+Ajaxサンプル集 | JavaScript+Ajaxサンプル集
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-02-11 02:00
芸が細かい、涙ぐましい努力に唖然です。
http://dev.jquery.com/view/tags/ui/1.0.1a/demos/ui.sortable.html

jQuery っての。
Allabout の JavaScript ページに日本語解説があります。

http://allabout.co.jp/internet/javascript/closeup/CU20080120A/
http://allabout.co.jp/internet/javascript/closeup/CU20080120A/index2.htm#2

主さんの要件にピッタンコなものがありましたよ。
ドロップしたのに「ニュるー」って元の位置に戻ってしまうのは好き好きですが。


[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-02-11 02:12 ]
1

スキルアップ／キャリアアップ（JOB@IT）