Question

我想制作一个可拖动的Ace编辑器。但是当我尝试拖动时，编辑器“粘住”光标。它适用于常规div。

<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<div id='my_ace' style='position:relative; width:300; height:100'>my_ace</div>
<div id='regular' style='width:300; height:100; border: solid 1'>regular</div>

<script>
var editor = ace.edit('my_ace')
$('#my_ace').draggable()
$('#regular').draggable()
</script>

编辑：实际上，我只在Chrome中看到此行为。编辑器并没有坚持使用Firefox。

Answer 1

解决方案是向编辑器添加一个handle元素，并将其用作可拖动的部分。

<script src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<div class='outer' style='width:300;'>
    <div id='handle' style='width:100%; height:20; background-color:grey'></div>
    <div id='with_handle' style='position:relative; height:100'>
        with_handle
    </div>
</div>

<div id='regular' style='width:300; height:100; border: solid 1'>regular</div>

<script>
ace.edit('with_handle')
$('.outer').draggable({handle: '#handle'})

$('#regular').draggable()
</script>

使编辑器本身可拖动将无法通过拖动来阻止选择文本。

在此处找到答案：jquery ui draggable accordion stick to mouse in Chrome

使用Ace编辑器和JqueryUI draggable

1 个答案: