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

本文介绍了jQuery UI可排序，将li值排序到文本字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用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="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="cdnjs.cloudflare/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="cdnjs.cloudflare/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%">