CODEWITHSUNDEEP
jqueryjquery-ui-sortable
gauti
gauti

Reputation: 1274

Sortable is not working when we try to drag on textarea

I am using jQuery .sortable in my project.The Dragging is working fine normally.I have text box inside my element .If i drag at text text box its no working.

<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

Upvotes: 0

Views: 1087

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You should dispatch event and use following snippet to keep inputs behaviour:

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)
        }
    });

}

Upvotes: 1

Related Questions