使用标签在Firefox中拖放问题

Question

我有以下标记

<li id="task-3" class="form-group task" draggable="true">
    <div class="input-group">
        <span class="input-group-addon"><input class="task__checked" type="checkbox" id="task-input-3"></span>
        <label class="form-control task__content" for="task-input-3">content....</label>
        <span class="input-group-addon task__delete">
            <button type="button" class="close" aria-hidden="true">×</button>
        </span>
    </div>
</li>

我需要拖放这些元素。我使用的D'n'D的实现在Chrome中是正确的，但在FF中，拖动事件不会触发。几个小时后，我已经想出了标记中的原因，特别是在标签中。

标签与复选框绑定，而不是拖放，他们尝试选中复选框。如果我尝试在标签中拖动文本，则元素会拖动，但如果我尝试拖动标签中的文本，它将无效。

这适用于FF

<li id="task-3" class="form-group task" draggable="true">
    <div class="input-group">
        <span class="input-group-addon"><input class="task__checked" type="checkbox" id="task-input-3"></span>
        <span class="form-control task__content" for="task-input-3">content....</span>
        <span class="input-group-addon task__delete">
            <button type="button" class="close" aria-hidden="true">×</button>
        </span>
    </div>
</li>

http://jsfiddle.net/hhyaw53t/

简短的版本。它不替换元素，但显示伪拖动元素http://jsfiddle.net/ut1pyf3x/