2014-01-08 3 views
1

здесь, у меня есть код, который позволяет перетаскивать гармонию. Но то, что я хочу, - это когда пользователь нажимает на редактирование, тогда контент в гармонике должен быть доступен для редактирования. Я пробовал ответы по следующей ссылке How to make an element's content editable with JavaScript (or jQuery). Но не получить результат, который я хочу.contenteditable не работает в согласии

Сценарий:

<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

Как просто создать скрипку http://jsfiddle.net/ – Anup

+0

@Anup ... что это было? пустая скрипка? – Rumin

+0

Я предлагал вам создать скрипку. – Anup

ответ

0

Working FIDDLE

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

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

Новый Edited: -

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

FIDDLE 2

+0

mate, вы сделали текст в гармоничном редактировании, но моя функция перетаскивания n потеряна в вашей скрипке. – Rumin

+0

и то, что я добиваюсь, все тот же i.e uneditable. Но перетащить еще нельзя. – Rumin

+0

http://jsfiddle.net/taa9S/1/ – Rumin

Смежные вопросы