備忘録
備忘録 : ドラッグ＆ドロップで並び替え
d3pipes の管理画面で利用されているドラッグ＆ドロップでの joint の並び替えは、prototype.js などの Javascript のライブラリを使って実現しています。
（d3pipes）http://xoops.peak.ne.jp/md/mydownloads/singlefile.php?lid...
（JS library）http://xoops.peak.ne.jp/md/mydownloads/singlefile.php?lid...
そのドラッグ＆ドロップを「ツリーメニュー2」の管理画面にも組み込んだので、この並べ替えの大まかな構造について、この文の続きに書き留めておきます（かなり小さくまとめたつもり）。左側の色が濃い部分がドラッグ用のハンドルです。
このドラッグ＆ドロップは、FireFox では動作するようですが、IE6・Opera9 では動かないようです。（追記2008.3.10：IE7では動作します）
- No.1
- No.2
- No.3
- No.4
- No.5
- No.6
- No.7
- No.8
- No.9
- No.10
<style type="text/css">
span.hl {
background-color: #E8A400;
cursor: move;
float:left;
padding: 2px;
height: 30px;
width:100px;
}
ul#sort li.rr span { background-color: #A466E8; }
ul#sort input { text-align:center;width:30px; }
ul#sort li {
list-style: none outside;
margin: 10px 0px;
padding: 0px;
height:34px;
border:1px solid #E8A400;
background-color: #FFF4D8;
clear: both;
}
ul#sort li.rr {border:1px solid #A466E8;background-color:#e6b9ff;}
</style>
<ul id="sort">
<li id="idx_1"><span class="hl"><input type="text" value="1" id="sw_1" /></span>No.1</li>
<li id="idx_2" class="rr"><span class="hl"><input type="text" value="2" id="sw_2" /></span>No.2</li>
<li id="idx_3"><span class="hl"><input type="text" value="3" id="sw_3" /></span>No.3</li>
<li id="idx_4" class="rr"><span class="hl"><input type="text" value="4" id="sw_4" /></span>No.4</li>
<li id="idx_5"><span class="hl"><input type="text" value="5" id="sw_5" /></span>No.5</li>
<li id="idx_6" class="rr"><span class="hl"><input type="text" value="6" id="sw_6" /></span>No.6</li>
<li id="idx_7"><span class="hl"><input type="text" value="7" id="sw_7" /></span>No.7</li>
<li id="idx_8" class="rr"><span class="hl"><input type="text" value="8" id="sw_8" /></span>No.8</li>
<li id="idx_9"><span class="hl"><input type="text" value="9" id="sw_9" /></span>No.9</li>
<li id="idx_10" class="rr"><span class="hl"><input type="text" value="10" id="sw_10" /></span>No.10</li>
</ul>
<script type="text/javascript" src="http://never-ever.info/common/libs/prototype.js"></script>
<script type="text/javascript" src="http://never-ever.info/common/libs/scriptaculous.js"></script>
<script type="text/javascript" src="http://never-ever.info/common/libs/effects.js"></script>
<script type="text/javascript" src="http://never-ever.info/common/libs/controls.js"></script>
<script type="text/javascript" src="http://never-ever.info/common/libs/dragdrop.js"></script>
<script type="text/javascript">
// <![CDATA[
Sortable.create(
'sort',
{
constraint: false,
handle: 'hl',
onUpdate: function( ele ) {
var weight = 1 ;
Sortable.sequence( ele ).each(
function( num ) {
$('sw_'+num).value = weight++ ;
}
) ;
}
}
);
// ]]>
</script>
0コメント
- javascript で存在しない画像を消す (2009-01-16 11:50:49)
- javascript でテーブルの行の表示・非表示について (2008-12-04 16:20:36)
- ドラッグ＆ドロップで並び替え (2007-08-03 11:21:27)
- 承認待ちブロックについて (2007-01-23 11:43:37)
- 空メールシステム＠さくら (2006-11-02 15:25:00)
