1

jquery-ui sortable を使用していますが、ドラッグ要素の DOM を変更する方法を知りたいです (ドラッグ/ソートされる要素にアイコンを追加する必要があります)。そう

 $("#list").sortable({
    helper: function(event, ui){
        ...
    }
 });

この場合、プロパティを使用してhelperいます。ドキュメントによると、uiソートされる要素ですが、このオブジェクトの要素の html にアクセスするにはどうすればよいですか。ありがとうございました

更新:小さな jsfiddle http://jsfiddle.net/y6xtV/1/を作成します。私が欲しいのは、並べ替えを開始すると、ドラッグ/並べ替えアイテムの周りに境界線があり、その中に小さなアイコンがある..助けてください

4

1 に答える 1

3

ヘルパーにボーダーとその中の画像、またはドラッグされている「元の」要素を持たせたいですか?

これが私が思いついたものです。私が作ったを参照してくださいjsfiddle。

JS

$(function () {
    $("#sortable").sortable({
        start: function (event, ui) {
            ui.item.css('border', '1px solid red').append('<span class="ui-icon ui-icon-check icons"></span>');
        },
        stop: function (event, ui) {
            //reset to no border or whatever your desired default border is
            ui.item.css('border', '');
            ui.item.children('.icons').remove();
        }
    });
    $("#sortable").disableSelection();
});

CSS

.icons {
    display:inline-block;
    position: absolute;
    right: 0;
}
#helper {
    border: 1px solid red;
}

使いたい場合helper

//sortable
helper: function (event, ui) {
    return $('<div id="helper">I am the helper<span class="ui-icon ui-icon-check icons"></span></div>');
}

ヘルパーをテストするには、コメント アウトstartしstop、逆にhelper関数をコメント アウトします。を追加する CSS テーマも追加しましたui-icons。

本当に使いたいかどうかわからないhelper. 少し混乱します...しかし、私の解決策は、ドラッグされたアイテムに境界線と画像を追加します。

ドキュメンテーション：

于 2013-06-03T17:18:41.247 に答える