从Draggable复制到Ace Editor Droppable
我正在尝试添加拖放功能到Ace编辑器。我正在使用jQuery Droppable函数来实现这一点。我有拖动功能，并且Ace编辑器区域也出现了。Drop函数当前不工作。我对drop函数的预期用途是将文本从可拖动的div复制到Ace编辑器区域。当我不使用Ace编辑器时，drop函数可以工作，比如当我将DIV拖到可拖放DIV时，它可以很好地复制可拖放DIV的内容。因此，使用Ace的实现出现了一些问题，因为编辑器没有被填充可拖动的内容。这是我的密码。我现在把所有的东西都放在一个文件里，我打算把它们分开，一旦我更好地理解了Ace。
null
<!DOCTYPE html>
<html lang="en">
<head>
<title>Code Block Project</title>
<style type="text/css" media="screen">
#draggable {
width: 202;
height: 30px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
border-style: solid;
border-width: 2px;
}
#droppable {
left: 0;
width: 600px;
height: 300px;
padding: 0.5em;
float: left;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js">
</script>
<script>
</script>
<script>
$(function() {
$("#draggable").draggable({
revert: true
});
$("#droppable").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
$(this).find(".ui-widget-header").remove();
$("<p>").append(ui.draggable.contents().clone()).appendTo(this);
}
});
var editor = ace.edit("droppable");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/python");
});
</script>
</head>
<body>
<div id="droppable" class="ui-widget-header">
<p> #Dragcodeblock </p>
</div>
<div id="draggable" class="ui-widget-content">
<p> Hello World </p>
</div>
</body>
</html>null
共有1个答案
您显示的代码工作，它只是没有做任何可见的事情，因为它将文本添加到隐藏的dom节点，如果您想要更改编辑器值，可以调用editor.Insert
null
<!DOCTYPE html>
<html lang="en">
<head>
<title>Code Block Project</title>
<style type="text/css" media="screen">
#draggable,
#draggable2 {
width: 202;
height: 30px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
border-style: solid;
border-width: 2px;
}
#droppable {
left: 0;
width: 600px;
height: 300px;
padding: 0.5em;
float: left;
margin: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://ajaxorg.github.io/ace-builds/src-noconflict/ace.js">
</script>
</head>
<body>
<div id="droppable" class="ui-widget-header">
<p> #Dragcodeblock </p>
</div>
<div id="draggable" class="ui-widget-content">
<p>Hello World</p>
</div>
<div id=draggable2 draggable=true>
browser drag
</div>
</body>
<script>
$("#draggable").draggable({
revert: true
});
$("#droppable").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function(event, ui) {
var pos = editor.renderer.screenToTextCoordinates(event.clientX, event.clientY)
editor.session.insert(pos, ui.draggable.text())
return true
}
});
var editor = ace.edit("droppable");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/python");
document.getElementById("draggable2").addEventListener("dragstart", function(e) {
e.dataTransfer.setData("text/plain", this.textContent)
});
</script>
</html>-
问题内容： 我在这里面临着新的挑战。我似乎找不到从MySQL（在Linux机器上运行到MS SQL Server）的复制优先级。 有人做过吗？ 最重要的是，对MySQL数据库所做的所有更改都应实时或关闭在MS数据库上复制。MS数据库不太可能以任何其他方式更新，因此不需要双向工具。 我认为一种方法是从二进制日志中读取更改。有人解析过吗？ 感谢您的帮助。 问题答案： MySQL中的触发器可用于捕获更改
-
我可以使用'yy'和'p'复制并粘贴到我的Vim文件中，但是当我从外部复制一些Python代码并尝试在我的Vim文件中执行'p'时，它只会将最后复制的内容粘贴到我的Vim中。 有没有反正我可以同步我的vim和系统剪贴板？？
-
Categories: Interactions version added: 1.0 Description: 该组件可以让你使用鼠标拖动所有元素。 QuickNavExamples Options addClasses appendTo axis cancel connectToSortable containment cursor cursorAt delay disabled distan
-
UIView-draggable 是个带有拖拽功能的 UIView 类。
-
Draggable Tabs 是一个可拖动的 Tab 控件
-
Draggable Accordion 是一个可拖放的拉帘