2

JSONファイルからロードされたというソート可能があります。これは、ソート可能な jquery http://jqueryui.com/demos/sortableです。

しかし、私は1つのアイテムを編集したい. 前の項目はユーザーから挿入されます。たとえばhttp://jqueryui.com/demos/sortableを見ると、項目 3 が必要です。どのように?

ここで、 JavaScriptまたはjQueryを使用して、1 つの変数の文字列を使用して、小鳥などの 1 つのアイテムを編集したいと考えています。textareaこの変数は、ユーザーから.(これは知っています) に挿入されます。

変数を使用してアイテムのソート可能を編集する方法???

textareaキャンセルする必要がある要素名から受け取ります。

<textarea></textarea>

リストを分析する方法を知っていますが、名前のアイテムのソート可能を編集 (変更) しますか?

sortableの HTML コード:

<div id="sortparam">

<ul style="" class="ui-sortable" id="sortable">
    <li style="" id="1" class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Singular sensation</li>
    <li style="" id="2" class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Beady little eyes</li>
    <li style="" id="3" class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Little birds </li>
</ul>

</div>

お願い、したくないcontenteditable

4

2 に答える 2

1

テキスト ノードをターゲットにするか、要素の完全な html を置き換える必要があります。編集対象のソート可能オブジェクトをどのようにターゲットにするつもりかを知る方法はありません。

次のソリューションでは、アイコン html を保存し、要素の完全な html を更新します。

デモ: http://jsfiddle.net/WZeMH/

/* no relationship given on how to determine which sortable to edit use second one*/
var whichSortable= 2;

/* define sortable element to edit */
var $sortableEl=$('#'+whichSortable);

/* store icon span html string*/
var iconSpan=$('<div>').append( $sortableEl.find('.ui-icon').clone() ).html();

$('textarea').keyup(function(){
    var val=$(this).val();
     $sortableEl.html( iconSpan + val);    
})
于 2012-06-23T09:02:46.757 に答える
0

ほんの一例：

textbox次のようなものがあるとします。

<input type="text" id="your_text">

keyupこれで、イベントをそれにバインドtextboxし、テキスト更新liの並べ替え可能なコンテンツを使用できます。

var li = $('#sortable li#3'),           // reference of li
    originalVal = li.text(),            // keep reference of original 
                                        // text(e.g Little birds)
    iconSpan = li.find('span.ui-icon'); // take the span icon

$('#your_text').keyup(function() {       // bind a keyup event
  var val = $.trim( this.value );        // take new value on each keyup
  if( val ) {                            // if new value entered
    li.html( iconSpan + val );           // set new value to little birds
  } else {                               // if text box is empty
     li.html( iconSpan + originalVal );  // set original value
  }
});

しかし、同じ数textboxのsortable要素が必要でありtextbox、他のプロセスを通じてその価値を捉えることができると思います。

于 2012-06-23T08:29:24.217 に答える