1

Topic: Text editing

All greetings, during operation performance appeared a question. At me is on unit page 3 (1 on top, 2 sideways). There is a possibility of transfer of cards from the left unit in the right. How to implement text editing in cards and to add in the upper unit the same cards, only for them only editing? Here approximately that is

<! DOCTYPE html>
<html>
<head>
<title> Untitled </title>
<meta charset = "utf-8">
<style type = "text/css">
body, html {
width: 100 %;
height: 100 %;
margin: 0;
}
.block {
width: 100 %; height: 100 %;
display: flex;
flex-wrap: wrap;
}
.block> div {
height: 50 %;
transition:.8s;
box-sizing: border-box;
}
.block> div:nth-child (1) {width: 100 %;
background-color: red;
}
.block> div:nth-child (2) {width: 50 %;
background-color: yellow;
}
.block> div:nth-child (3) {width: 50 %;
background-color: green;
}
.text {
width: 100px;
height: 50px;
background-color: rgba (255, 244, 148, 1);
border: 4px solid rgba (139, 69, 19, 1);
border-radius: 12px;
text-align: center;
line-height: 50px;
}
</style>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"> </script>
<script>
$(function () {
$(".block>").sortable ({
connectWith: ".block>"
}).disableSelection ();
})
</script>
</head>
<body>
<div class = "block">
<div> </div>
<div>
<div class = "text"> test_01 </div>
<div class = "text"> test_02 </div>
<div class = "text"> test_03 </div>
<div class = "text"> test_04 </div>
<div class = "text"> test_05 </div>
</div>
<div> </div>
</div>
</body>
</html>