JQuery用户界面可排序，排序李值文本字段

Question

进出口使用JQuery用户界面，用于排序的功能。

我能够从基础数据列表拖动到层次结构和排序工作。

但是，如果我从基础数据列表中拖动一个li项目到测量公式中的文本框，应该复制该值。

请检查我输入的示例。

感谢

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