jQuery UI可排序，将li值排序到文本字段 [英] JQuery UI Sortable, Sort li value to text field

问题描述

我使用JQuery UI来实现可排序的功能.

Im using JQuery UI, for sortable feature.

我能够从基本数据列表拖动到层次结构，并且可以进行排序.

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

但是，如果我将基本项目列表中的li项拖到Measure公式内的文本框中，则应该复制该值.

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

请检查我输入的示例.

谢谢

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

推荐答案

请检查以下提到的解决方案.它将为您提供帮助.

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

这篇关于jQuery UI可排序，将li值排序到文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！