javascript - 使用 jQuery 'draggable' 时，文本在与容器碰撞时出于某种原因换行。为什么？以及如何解决？

Question

我正在尝试设计一个页面，其中左侧有一个任务列表，右侧有许多框(每个员工一个)，以便我可以快速分派(dispatch)所有任务。

我不知道它是否相关，但我使用的是 Bootstrap。这是我列表的标记:

<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>

这是 javascript(我刚刚开始这个页面，所以 'drop' 代码还没有)

<script>
    $(document).ready(function() {
        $('div[id^="Unassigned_"]').draggable({ helper: 'clone', containment: '.page-content-wrap' });
    });
</script>

出于某种我不知道的原因，如果我将任何任务(例如具有长名称的任务)拖到右侧，文本会在“碰到”面板的右边框时换行，然后当我通过光标的边框，元素跟随，但它仍然被包裹。

有谁知道为什么会这样？有办法解决吗？

非常感谢

Answer 1

您可以使用类 .ui-draggable.ui-draggable-dragging 固定拖动元素的宽度

.ui-draggable.ui-draggable-dragging {
  width: 100%;
  border: 1px solid #eee;
  padding: 5px;
  color: #888;
}

Fiddle demo