- 締切済み
ドラッグ＆ドロップでコンテンツを移動させる。(scriptaculaus)
お世話になります。 ドラッグ＆ドロップでコンテンツを自由に並び替えができるものを作ろうとしております。 以下のソースでドラッグ＆ドロップで並び替えが出来るのですが もう少し手を加えたいと思っております。 やりたい事 1.ドラッグ中(onmousedown状態）で、配置元の下に同じ大きさのボックス(破線：border-style: dashed)を表示。 2.ドラッグ中、順番が変化した時点(Sortable.createのonChange状態)で、配置先に選択した同じ大きさのボックス(破線：border-style: dashed)を表示。 かつ配置元で表示したボックスは消去。 つまりはgoogleのパーソナライズドホームと同じことが出来ればと思っております。 お忙しいところ申し訳ありませんが どうかご教授よろしくお願いいたします。 バージョン：scriptaculous-js-1.6.1 ソースを載せようと思ったら、文字数制限で引っかかってしましました。 のちに回答を頂いた後、補足で載せます。
- bakenshibakenshi
- お礼率81% (115/141)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
noname#19175
回答No.1
このライブラリは使ったことがないので直接的な回答は出来ませんが、 > 補足で載せます。 とのことなので、補足スペースとして使って下さい。 ソースがないと知っている人でも何にも答えられないと思うので。 ドラッグ中のスタイル変更は、スタイル変更の指示を任意のタイミングで付け加えるだけでよいのでは？と思うのですが、、
補足
回答有難うございます。 ソースを載せます。 <head> <script src="prototype.js" type="text/javascript"></script> <script src="scriptaculous.js" type="text/javascript"></script> <style> ul.std li { padding-right:0px;padding-left:0px;padding-bottom:0px;margin:0px;padding-top:0px } div.green { border-right:#c5dea1 1px solid;border-top:#c5dea1 1px solid;border-left:#c5dea1 1px solid;cursor:move;border-bottom:#c5dea1 1px solid;background-color:#ecf3e1;margin-bottom:20px; } div.orange { border-right:#e8a400 1px solid;border-top:#e8a400 1px solid;border-left:#e8a400 1px solid;cursor:move;border-bottom:#e8a400 1px solid;background-color:#fff4d8;margin-bottom:20px; } </style> <script type="text/javascript"> function change1() { } function update1() { } function init() { Sortable.create("l1",{tag:'div',dropOnEmpty:true,handle:'handle',containment:["l1","l2"],constraint:false,onUpdate:update1,onChange:change1}); Sortable.create("l2",{tag:'div',dropOnEmpty:true,handle:'handle',containment:["l1","l2"],constraint:false,onUpdate:update1,onChange:change1}); } function md1(id) { } </script> </head> <body onload="init();"> <div style="height:200px;"> <div style="float:left;"> <br> <ul class="std" id="l1" style="height:150px;width:200px;"> <div class="green" id="l1_1" position:relative;onmousedown="md1('l1_1')">コンテンツ１</div> <div class="green" id="l1_2" position:relative;onmousedown="md1('l1_2')">コンテンツ２</div> <div class="green" id="l1_3" position:relative;onmousedown="md1('l1_3')">コンテンツ３</div> </ul> </div> <div style="float:left;"> <br> <ul class="std" id="l2" style="height:150px;width:200px;"> <div class="orange" id="l2_1" position:relative;onmousedown="md1('l2_1')">コンテンツ４</div> <div class="orange" id="l2_2" position:relative;onmousedown="md1('l2_2')">コンテンツ５</div> </ul> </div> </div> </body> </html>