Javascriptでドラッグアンドドロップする際、createElementで表示した影(div)の上でもドロップできるようにしたい。

Question

###前提
画像①～②

現在、Javascriptにてドラッグアンドドロップを使用したWebアプリを制作しています。
都合上ドロップ先にわかりやすくするため、ドロップしたいエレメントの影のように見えるDIVをcreateElement,appendChildを使用し、ドロップ先に表示しました。

ソースコードが非常に複雑になってしまっており、ソースコードを記載しての説明が困難のためイメージ画像を用意しました。

###発生している問題・エラーメッセージ
画像③
現在抱えている問題は、ドラッグしたエレメントを影の上に重ねた場合ドロップすることができないということです

###実現したいこと
表示している影の上でも画像④と同様にドラッグしたエレメントをドロップ可能にしたいです。
どのようにコードを組めばよろしいでしょうか？ご教授いただけるとありがたいです。

###補足情報(言語/FW/ツール等のバージョンなど)
ブラウザ：GoogleChrome
html5
css3
Javascript

Comments

[naomi3]

作った影にもドラッグイベントのリスナを登録し、ドロップ先DIVにバブリングしていますか？

Answer 1

影とドロップの z-index を調整すればよいのでは。

Comments

[tornadon]

z-indexは試してみたのですが、上手くいきませんでした。
後出しで申し訳ないのですが、ドラッグ時にx座標を判定してそのx座標によって影の表示位置を変更するという処理を行っているためだと思われます。

[kei344]

行っている処理の想像はついていますが、重ね順で何とでもなると思います。
ひとまず書かれている状況が再現するコード（HTML/CSS/jsなど）か、再現するURLを提示されたほうが回答を得やすいと思います。

[kei344]

**動くサンプル：** http://jsfiddle.net/4k82z5e7/1/

雑ですが。というかシャドウであれば box-shadow でも良いような。

[tornadon]

ご丁寧にありがとうございます。
jsfiddle？を初めて見ました！今後質問するときに私も活用してみたいと思います。
影の表示についてはまだ動作未確認ですがbackground-positionを活用することにしました。