divのテキストボックスのドラグがうまくできません。

Question

こんにちは。

divの中にspanタグのラベル名とreadonlyのテキストボックスを入れて
divをドラッグ可能な状態で動かしたいです。

<div id="aboutBox" class="boxLook boxBg drag">
    <span>test</span>
    <input type="text" readonly />
</div>

ですが、
spanはドラッグできますが、テキストボックスがドラッグが効きません。
フィドルにサンプルコードがありますので、是非目を通してください。

サンプルコードはこちら

よろしくお願いします。

Answer 1

もう解決済みですが念のため。
ざっくりと指定するなら以下のようにすると出来ると思います。

$('.drag').draggable({
    cancel: null
});

cancelにはデフォルトでinput以外にも
input,textarea,button,select,option
が指定されているので、それらはドラッグさせたくない場合は

$('.drag').draggable({
    cancel: 'textarea,button,select,option'
});

のように指定できるはずです。

該当のドキュメントは↓です。英語ですが。
https://api.jqueryui.com/draggable/#option-cancel

Comments

[super]

一番ほしかった回答でした！
凄い助かりました。既存の構造そのまま解決できましたので、notable様ので修正することになりました。
本当にありがとうございます。

Answer 2

<div id="aboutBox" class="boxLook boxBg drag"><div style="position:absolute;z-index:2;height: 100%;width: 100%;"></div><span>test</span><input type="text" class="drag-input" readonly style="position:relative;z-index:1;" /></div>

こうですか？

Comments

[super]

解決できました！
ありがとうございます。凄く助かりました　ｍ＿＿ｍ

[super]

完璧な回答ですが、divの中に<div style="position:absolute;z-index:2;height: 100%;width: 100%;"></div>を入れないで構造は今のままにして解決する方法もありますでしょうか？
簡単にできそうでしたら教えてください。

[MineoOkuda]

:before要素を指定してみるなどですかね？
#aboutBox:before{
position:absolute;
z-index:2;
height: 100%;
width: 100%;
content: '';
}
#aboutBox input{
position: relative;
z-index: 1;
}