Jquery Draggable text wrap
When dragging, text wrap until it's out of the container, then stays wrapped. Why? and how to fix it?
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">Tasks</div>
</div>
<div class="panel-body panel-body-table">
<div id="Unassigned_1" style="margin-left:0px">Task 1</div>
<div id="Unassigned_4" style="margin-left:10px">Task 1.1</div>
<div id="Unassigned_8" style="margin-left:20px">Task 1.1.1 Some long name so I can test</div>
<div id="Unassigned_9" style="margin-left:20px">Task 1.1.2</div>
<div id="Unassigned_5" style="margin-left:10px">Task 1.2</div>
<div id="Unassigned_8" style="margin-left:20px">Task 1.2.1</div>
<div id="Unassigned_9" style="margin-left:20px">Task 1.2.2</div>
<div id="Unassigned_2" style="margin-left:0px">Task 2</div>
<div id="Unassigned_3" style="margin-left:0px">Task 3</div>
<div id="Unassigned_6" style="margin-left:10px">Task 3.1</div>
<div id="Unassigned_7" style="margin-left:10px">Task 3.2</div>
</div>
</div>
</div>
<div class="col-md-9"> Some other content</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.ui-draggable.ui-draggable-dragging {
width: 100%;
border: 1px solid #eee;
padding: 5px;
color: #888;
}
JavaScript
/* Latest compiled and minified JavaScript included as External Resource */
$('div[id^="Unassigned_"]').draggable({ helper: 'clone', containment: '.page-content-wrap' });