JQuery UI Sortable, Sort li value to text field

问题

Im using JQuery UI, for sortable feature.

i'm able to drag from base data list to hierarchy and sortable is working.

But if i drag a li item from base data list to text box inside Measure formula the value should be copied.

please check the example that i have typed.

Thanks

$(function() {
    $( "#sortable1" ).sortable({
        connectWith: ".connectedSortable",
        remove: function(event, ui) {
            ui.item.clone().appendTo('#sortable2');
            $(this).sortable('cancel');
        }
    }).disableSelection();

HTML

    <ul id="sortable1" class="sortable1 connectedSortable list-unstyled table1">
    <li class="base-li-item">Example 1</li>
    <li class="base-li-item">Example 2</li>
    <li class="base-li-item">Example 3</li>
    <li class="base-li-item">Example 4</li>
    <li class="base-li-item">Example 5</li>
    <li class="base-li-item">Example 6</li>
    <li class="base-li-item">Example 7</li>
    </ul>

<input id="basedatadrag" type="text" style="width: 100%">

回答1:

Please check below mentioned solution. It will help you.

$(function() {
    $("ul.droptrue").sortable({
        connectWith: "ul",
        revert: false,
        receive: function(event, ui) {
            var formula = [];
            ui.item.attr('draggable', "false").removeClass('ui-state-highlight').addClass('ui-state-default');
            $('#sortable2 li').each(function(index) {
                formula.push('{' + $(this).html() + '}');
            });
            $('#basedatadrag').val(formula.join('+'));
        }
    });

    $("ul.dropfalse").sortable({
        connectWith: "ul",
        revert: true,
        receive: function(event, ui) {
            var formula = [];
            ui.item.attr('draggable', "false").removeClass('ui-state-default').addClass('ui-state-highlight');
            $('#sortable2 li').each(function(index) {
                formula.push('{' + $(this).html() + '}');
            });
            $('#basedatadrag').val(formula.join('+'));
        }
    }).draggable(false);
    $("#sortable1, #sortable2").disableSelection();
});

#sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; float: left; margin-right: 10px; background: #eee; padding: 5px; width: 143px;}
#sortable1 li, #sortable2 li, #sortable3 li { margin: 5px; padding: 5px; font-size: 1.2em; width: 120px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
        
        <ul id="sortable1" class="droptrue">
            Base Data
            <li class="ui-state-default">Item 1</li>
            <li class="ui-state-default">Item 2</li>
            <li class="ui-state-default">Item 3</li>
            <li class="ui-state-default">Item 4</li>
            <li class="ui-state-default">Item 5</li>
            <li class="ui-state-default">Item 6</li>
        </ul>

        <ul id="sortable2" class="dropfalse">
            Hierarchy
        </ul>
        <br style="clear:both"> <br style="clear:both">
        <input id="basedatadrag" type="text" style="width: 100%">

来源：https://stackoverflow.com/questions/45589952/jquery-ui-sortable-sort-li-value-to-text-field

标签

jquery-ui-sortable