这里,我有能够拖放手风琴的代码。 但我想要的是当用户点击编辑时,手风琴中的内容应该是可编辑的。 我已经尝试了以下链接How to make an element's content editable with JavaScript (or jQuery)的答案。但没有得到我想要的结果。
脚本是:
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src=" http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function () {
$('#accordion').accordion({
collapsible: true,
active: false,
height: 'fill',
header: 'h3'
}).sortable({
items: '.s_panel'
});
$('#accordion').on('accordionactivate', function (event, ui) {
if (ui.newPanel.length) {
$('#accordion').sortable('disable');
} else {
$('#accordion').sortable('enable');
}
});
$( ".sortable" ).sortable({
connectWith : ".sortable"
});
});
</script>
<script>
$('#btn1').click(function () {
$('#content1').attr('contenteditable', 'true');
});
</script>
</head>
HTML是:
<body>
<br /><br />
<div id="source" style="width:345px;float:left; border:1px dotted ">
<div id="accordion" style="height:450px;width:300px; " class="sortable">
<div class="s_panel">
<h3 class="ui-state-default unassigned">About Us</h3>
<div id="data">
<div id="content1">This is about Us</div>
<form>
<input id="bt1" type="button" value="edit"/>
</form>
</div>
</div>
</div>
</div>
<div id="teams" style=" position:absolute; top: 100px; left:400px; width:600px;" >
<ul class="sortable" style="height:450px;width:550px; "></ul>
</div>
</body>
答案 0 :(得分:0)
$('#btn').click(function () {
$('#content1').attr('contenteditable', 'true');
});
<input id="btn" type="button" value="edit" />
新编辑: -
$( ".sortable" ).sortable({
connectWith : ".sortable"
});