2

並べ替え可能なリストに receive イベントを使用しています。要素の子要素の 1 つのスタイルを、ドラッグ可能な要素からドラッグしたときに変更できるイベントが必要です。簡単な例を次に示します。

    <ul id="sortable">
      <li>element1<div class="child"></div></li>
      <li>element2<div class="child"></div></li>
    <ul>

    <ul id="draggable">
      <li>element3<div class="child"></div></li>
      <li>element4<div class="child"></div></li>
    <ul>

JS の場合:

    $('#sortable').sortable(
    {
          //extra stuff excluded

              receive: function(e, ui)
                         {
                            //how do I use ui to get the child element "child"?
                            //also I need to be able to style the current li element
                         }
    }
);

    $('#draggable').draggable(
            {
          connectToSortable: '#sortable'
            }
    );

*解決した問題: 回答は Frédéric Hamidi によって以下に投稿されていますが、要するに、回答はソート可能で受信イベントではなく停止イベントを使用することです。

4

3 に答える 3

4

receiveイベントではui.item、ドラッグされた要素をラップする jQuery オブジェクトが含まれます。クラスセレクターでchildren()またはfind()を使用して、その子要素を一致させることができます。

$("#sortable").sortable({
    receive: function(e, ui) {
        ui.item.css("color", "red");        // For example.
        ui.item.children(".child").show();  // Show child <div>.
    }
});

更新:複製されたヘルパーを使用しているため、ui.helper代わりにui.item. ただし、それでは良い結果が得られないようです (ヘルパーが別のウィジェットから派生したためかもしれません)。

別の解決策は、のstop代わりにイベントを処理することですreceive。そこにui.itemは、ヘルパー オプションに関係なく、常に新しい要素があります。

$("#sortable").sortable({
    helper: "clone",
    items: "li",
    stop: function(e, ui) {
        ui.item.children(".child").show();
    }
});

更新されたフィドルはこちらにあります。

于 2012-07-26T06:38:59.563 に答える
0

ui.item プロパティを使用してみてください。jquery.ui 仕様から: ui.item - 現在ドラッグされている要素。

receive: function(e, ui){
             var content = $(ui.item).children('div.child').html();
         }
于 2012-07-26T06:39:33.537 に答える