user-selectで特定エリアのみドラッグ選択

どうしても画面上一部エリアのテキストのみをドラッグさせたい場面があった。

色々調べてみるとCSSのuser-selectで制御できる事が分かった。
(ただしブラウザ毎に挙動が異なるため、ベンダープレフィックスが必要)

特定エリア・文字を選択させない

このスタイルを画面全体に反映させれば、画面全体のテキストが選択されない。
ベンダープレフィックス付けて、IE・Chrome・FireFox・Safariそれぞれに対応させる。

.none-select {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

テキストを選択可能にする

valueをnoneからtextに変えてあげればテキストは選択可能になる。

.text-select {
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
}

textは特定エリアを越えて選択可能なので、選択可能範囲を指定要素の範囲内にだけ限定させることは出来ない。ただし使いたくないし、世の中から無くなればなぁ～と思っていたIEならelementで対応可能なのが分かった。

選択範囲を指定要素の範囲内に制限

全体のdivをnoneで選択不可にして指定エリアにelementを指定すれば、要素のテキストをユーザーは選択可能だが、選択できるのはこの要素の範囲内に制限させられた。

.element-select {
  -ms-user-select: element;
}

ちなみに-ms-user-select:elementは、IEによって初めて導入された新しいプロパティらしく、他のブラウザで試してみたが上手く動作してくれなかった。もしかしたらバージョン違いで動作するかも...