javascript - With jQuery 'draggable', the text wraps for some reason when colliding with container. Why? and how to fix? -
i'm trying design page there task list on left , many boxes (one each employee) on right can dispatch tasks quickly.
i don't know if relevant, use bootstrap. here list's markup :
<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 long name 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> and here's javascript (i'm begining page, 'drop' code not there yet)
<script> $(document).ready(function() { $('div[id^="unassigned_"]').draggable({ helper: 'clone', containment: '.page-content-wrap' }); }); </script> for reason don't know, if drag task (such 1 long name) right, text wraps when "hits" right border of panel, when pass border cursor, item follows, still wrapped.
does know why that? there way fix it?
thanks lot
you can fix width of dragging element using classes .ui-draggable.ui-draggable-dragging
.ui-draggable.ui-draggable-dragging { width: 100%; border: 1px solid #eee; padding: 5px; color: #888; }