Q&A
contenteditable属性をつけて編集できるようにしているのにドラッグ禁止にしたいとはどういうことですか？ドラッグ禁止にしたらテキストの編集ができなくなります。具体的にお願いします。
###問題
contenteditable属性をつけたdiv内のテキストをドラッグ禁止にしたいです。
下記のコードのようにcssでドラッグ不可にできそうな事をしていますが、効きません。
###どのような状態にしたいか
atomテキストエディタのような挙動にしたいのです。atomはドラッグできません。
動画を貼りました
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<script type="text/javascript" src="jquery-3.1.1.min.js"></script> 6<style> 7#box{ 8 user-select:none; 9 -webkit-user-select:none; 10 -webkit-user-drag:none; 11 -khtml-user-drag:none; 12 border-style:solid; 13 width:500px; 14 height:800px; 15} 16</style> 17</head> 18<body> 19 <div id="box" contenteditable="true"> 20 ドラッグ禁止になりません 21 </div> 22</body> 23</html>
回答2件
0
ベストアンサー
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 6<script> 7$(function() 8{ 9 10// クリックボタンを押した直後 11$('#box').on('mousedown', function(event) 12{ 13 // getSelectionに対応していなければ関数を抜ける 14 // Electronなら最新のChromeなので問題なし 15 if (!window.getSelection) return; 16 17 // テキストがドラッグで選択されているとき 18 // 動画のようにテキストの下に青色の背景色が表示されているとき 19 if (window.getSelection().rangeCount) 20 { 21 // テキスト選択部分の座標や幅情報が入っている 22 var selection = window.getSelection().getRangeAt(0).getBoundingClientRect(); 23 24 //console.log('上:' + selection.top + ', 左:' + selection.left); 25 //console.log('マウス上下:' + event.pageY + ', マウス左右:' + event.pageX); 26 //console.log('下:' + (selection.top + selection.height) + ', 右:' + (selection.left + selection.width)); 27 28 // マウスのクリック位置が青色のテキスト選択エリア内にあるとき 29 if (selection.top <= event.pageY && event.pageY <= selection.top + selection.height 30 && selection.left <= event.pageX && event.pageX <= selection.left + selection.width) 31 { 32 // 選択を解除する 33 window.getSelection().removeAllRanges(); 34 } 35 } 36}); 37 38}); 39</script> 40<style> 41#box 42{ 43 border-style: solid; 44 width: 500px; 45 height: 800px; 46} 47</style> 48</head> 49<body> 50 <div id="box" contenteditable="true"> 51 ドラッグ禁止になりません 52 </div> 53</body> 54</html>
これでどうですか？もしかしたら想定していないバグがあるかもしれません。
もっと単純に以下でもいいかもです。
javascript
1$('#box').on('mousedown', function() 2{ 3 if (!window.getSelection) return; 4 5 if (window.getSelection().rangeCount) 6 { 7 window.getSelection().removeAllRanges(); 8 } 9});
投稿2016/11/24 01:10
編集2016/11/24 03:53総合スコア248
0
編集不可能にするのだから、boolean値をfalseにする必要があるのでは？
HTML
1<div id="box" contenteditable="false"> 2 ドラッグ禁止になりません 3</div>
投稿2016/11/23 13:55
総合スコア1105
あなたの回答
tips
プレビュー
