今日は、ドラック＆ドロップで移動できるスクリプト「Docking boxes」を試してみました。
こちらのスクリプトは、「wordpress」の管理画面で標準装備されているスクリプトです。 投稿画面の右側にある、ドラック＆ドロップが出来て開閉状態をクッキーに保存しておくことが出来るやつです。
こちらをサイドバーに設置したいなぁ～なんて思って試したのですが・・・なかなか、大変でした。σ(^◇^;)ヒヤアセ
大変だった理由は・・・最初に言っておきますが「WP-Highslide」と喧嘩します。（笑） 「WP-Highslide」を有効化している場合、使用できません・・・問題ないはずなのに何度やっても動作しない・・・/(-_-)ヽコマッタァ・・・・これはもう何かと衝突しているのだろうと諦めようとしましたが、プラグインをひとつずつ確認してやっと原因究明しました！！・・・おかげでかなりの時間を費やしました・・・(TOT) その後は、あっさり設置できました・・・
※もしかしたら、自分の環境だけかもしれませんので、各自確認してください。ペコリ(o_ _)ｏ))
追記・・・共存方法として、少し強引な方法を考えてみた・・・こちら
設定方法
こちらからダウンロードそして解凍後「dbx」フォルダに、「dbx.css」 「dbx.js」 「dbx-key.js」 の３つのファイルを詰め込んで、ご自分のスクリプト置き場に転送してください。（ここでは /wp-content/js/dbx/ に置いたものとして説明します。）
次に「JavaScript」 ＆ 「css」 を、外部リンクとして読み込ませるために<head>〜</head>の間に書き込みます。 自分の場合は、テーマエディタでヘッダーの問題無さそうな部分に書き込みました。
<link rel="stylesheet" href="http://example.com/wp-content/js/dbx/dbx.css" type="text/css" />
<script type="text/javascript" src="http://example.com/wp-content/js/dbx/dbx.js"></script>
<script type="text/javascript" src="http://example.com/wp-content/js/dbx/dbx-key.js"></script>
黄色の部分にファイルの設置場所（アドレス）を指定<script type="text/javascript" src="http://example.com/wp-content/js/dbx/dbx.js"></script>
<script type="text/javascript" src="http://example.com/wp-content/js/dbx/dbx-key.js"></script>
使用方法
本文投稿内の記述方法は・・・ダウンロードして解凍したフォルダの中にある「dbx.html」を参考にしてください・・・・σ(^◇^;)ヒヤアセ
基本は、こんな感じです。（「dbx.html」より・・・ちょっといじってますが・・・）
<div class="dbx-group" id="sample">
<div class="dbx-box">
<div class="dbx-handle" title="box_1">ボックス １</div>
<ul class="dbx-content">
テスト</ul>
</div>
<div class="dbx-box">
<div class="dbx-handle" title="box_2">ボックス ２</div>
<ul class="dbx-content">
<a href="http://blog.le-coeur.net/">home </a></ul>
</div>
</div>
上記のように記述し、そして「dbx-key.js」に上記設定箇所を動作させるために下記のように記述します。<div class="dbx-box">
<div class="dbx-handle" title="box_1">ボックス １</div>
<ul class="dbx-content">
テスト</ul>
</div>
<div class="dbx-box">
<div class="dbx-handle" title="box_2">ボックス ２</div>
<ul class="dbx-content">
<a href="http://blog.le-coeur.net/">home </a></ul>
</div>
</div>
※赤文字のところは変更してはいけません！！ 黄文字のところはお好きなように～
「Docking boxes」を複数作る場合はこの黄文字の「id名」のところを違う名前にして設置します。
16行目あたりに、上記で黄文字で指定した「id名」を記述 その他はそのままでOK
//create new docking boxes group
var sample = new dbxGroup(
'sample', // container ID [/-_a-zA-Z0-9/]
'vertical', // orientation ['vertical'|'horizontal']
'7', // drag threshold ['n' pixels]
'no', // restrict drag movement to container axis ['yes'|'no']
'10', // animate re-ordering [frames per transition, or '0' for no effect]
'yes', // include open/close toggle buttons ['yes'|'no']
'open', // default state ['open'|'closed']
'open', // word for "open", as in "open this box"
'close', // word for "close", as in "close this box"
'click-down and drag to move this box', // sentence for "move this box" by mouse
'click to %toggle% this box', // pattern-match sentence for "(open|close) this box" by mouse
'use the arrow keys to move this box', // sentence for "move this box" by keyboard
', or press the enter key to %toggle% it', // pattern-match sentence-fragment for "(open|close) this box" by keyboard
'%mytitle% [%dbxtitle%]' // pattern-match syntax for title-attribute conflicts
);
「Docking boxes」を複数作る場合は、この部分を「id名」を違う名前にした物をもうひとつ記述します。var sample = new dbxGroup(
'sample', // container ID [/-_a-zA-Z0-9/]
'vertical', // orientation ['vertical'|'horizontal']
'7', // drag threshold ['n' pixels]
'no', // restrict drag movement to container axis ['yes'|'no']
'10', // animate re-ordering [frames per transition, or '0' for no effect]
'yes', // include open/close toggle buttons ['yes'|'no']
'open', // default state ['open'|'closed']
'open', // word for "open", as in "open this box"
'close', // word for "close", as in "close this box"
'click-down and drag to move this box', // sentence for "move this box" by mouse
'click to %toggle% this box', // pattern-match sentence for "(open|close) this box" by mouse
'use the arrow keys to move this box', // sentence for "move this box" by keyboard
', or press the enter key to %toggle% it', // pattern-match sentence-fragment for "(open|close) this box" by keyboard
'%mytitle% [%dbxtitle%]' // pattern-match syntax for title-attribute conflicts
);
あとは、お好きなように「dbx.css」をカスタマイズするだけです。
※しかし！！39行目より上は変更してはいけません！！
サンプル
上記のように設定するとこちらのようになります・・・ボックスが２個増えてますが・・・σ(^◇^;)ヒヤアセ複数指定した場合の記述例
ちょっと、説明がわかりづらかったと思うので見本を載せておきます。「投稿内」の記述例
<div class="dbx-group" id="sample">
<div class="dbx-box">
<div class="dbx-handle" title="box_1">ボックス １</div>
<ul class="dbx-content">
テスト</ul>
</div>
<div class="dbx-box">
<div class="dbx-handle" title="box_2">ボックス ２</div>
<ul class="dbx-content">
<a href="http://blog.le-coeur.net/">homeに戻る</a></ul>
</div>
</div>
<div style="clear: both; "> </div>
<br />
<div class="dbx-group" id="sample_2">
<div class="dbx-box">
<div class="dbx-handle" title="box_10">ボックス １０</div>
<ul class="dbx-content">
テスト</ul>
</div>
<div class="dbx-box">
<div class="dbx-handle" title="box_20">ボックス ２０</div>
<ul class="dbx-content">
<a href="http://blog.le-coeur.net/">homeに戻る</a></ul>
</div>
</div>
<div style="clear: both; "> </div>
<br />
※途中の「 <div style="clear: both; "> </div> 」は、回り込み解除のためです。 ・・・参考までに σ(^◇^;)ヒヤアセ<div class="dbx-box">
<div class="dbx-handle" title="box_1">ボックス １</div>
<ul class="dbx-content">
テスト</ul>
</div>
<div class="dbx-box">
<div class="dbx-handle" title="box_2">ボックス ２</div>
<ul class="dbx-content">
<a href="http://blog.le-coeur.net/">homeに戻る</a></ul>
</div>
</div>
<div style="clear: both; "> </div>
<br />
<div class="dbx-group" id="sample_2">
<div class="dbx-box">
<div class="dbx-handle" title="box_10">ボックス １０</div>
<ul class="dbx-content">
テスト</ul>
</div>
<div class="dbx-box">
<div class="dbx-handle" title="box_20">ボックス ２０</div>
<ul class="dbx-content">
<a href="http://blog.le-coeur.net/">homeに戻る</a></ul>
</div>
</div>
<div style="clear: both; "> </div>
<br />
「dbx-key.js」の記述例
するとこんな感じになります。
参考サイト 小粋空間 様
結局サイドバーはこちらは使わず、現在のものになってしまいました・・・ドラック＆ドロップで移動できるのは非常に面白くて惹かれるのですが・・・うにょ～んが好きなもので・・・（＾∀＾2）、
以上終了です。
人気度 : 15 %
（ 参考になったら、評価してねぇ～ (o*。_。)oペコッ
最上階
1階
関係のある記事
No user の書き込みがあります
コメントほしぃ～よぉ～ σ(^◇^;)