Question

我在我的项目中使用jQuery .sortable。拖动工作正常。我的元素中有文本框。如果我拖动文本文本框，则无效。

<ul id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1<textarea class="textArea"></textarea></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2<textarea class="textArea"></textarea></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3<textarea class="textArea"></textarea></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4<textarea class="textArea"></textarea></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5<textarea class="textArea"></textarea></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6<textarea class="textArea"></textarea></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7<textarea class="textArea"></textarea></li>
</ul>

function aa (){
$( "#sortable" ).sortable();
}
aa();

Fiddle

Answer 1

您应该调度事件并使用以下代码段来保持输入行为：

DEMO jsFiddle

function aa() {

    $("#sortable").sortable({
        start: function (event, ui) {
            $(this).data('preventBehaviour', true);
        }
    });
    $("#sortable :input").on('mousedown', function (e) {
        var mdown = document.createEvent("MouseEvents");
        mdown.initMouseEvent("mousedown", true, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, true, false, false, true, 0, null);
        $(this).closest('li')[0].dispatchEvent(mdown);
    }).on('click', function (e) {
        var $sortable = $("#sortable");
        if ($sortable.data("preventBehaviour")) {
            e.preventDefault();
            $sortable.data("preventBehaviour", false)
        }
    });

}

当我们尝试拖动textarea时，Sortable无效

1 个答案:

DEMO jsFiddle