Question

我正在使用JQuery UI，用于可排序功能。

我可以从基础数据列表拖动到层次结构，并且可排序正在工作。

但是如果我将li项从基础数据列表拖到Measure公式中的文本框中，则应该复制该值。

请检查我输入的示例。

由于

JS

$(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%">

Answer 1

请检查下面提到的解决方案。它会对你有所帮助。

$(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%">

JQuery UI可排序，将li值排序到文本字段

1 个答案: