不满意手风琴

时间:2014-01-08 07:29:31

标签: javascript jquery html contenteditable

这里,我有能够拖放手风琴的代码。 但我想要的是当用户点击编辑时,手风琴中的内容应该是可编辑的。 我已经尝试了以下链接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>

1 个答案:

答案 0 :(得分:0)

Working FIDDLE

$('#btn').click(function () {
    $('#content1').attr('contenteditable', 'true');
});

<input id="btn" type="button" value="edit" />

新编辑: -

$( ".sortable" ).sortable({
        connectWith : ".sortable"
    });

FIDDLE 2