0

最初のリストから2番目のリストにアイテムを追加できる2つの並べ替え可能なリストがあります。デフォルトの動作では、ソースリストから要素が削除されますが、それは私が望むものではないため（宛先リストにコピーしたい）、削除される前にソースリスト内の移動された要素のクローンを作成するためにいくつかの調整を行いました。

動作しますが、複製された要素のマージンに奇妙な問題があります。自分で見て：

これは前です：

ここに画像の説明を入力してください

ドラッグすると、マージンの不整合が発生します。

ここに画像の説明を入力してください

私はここに問題のjsfiddleがあります：http：//jsfiddle.net/JNbsX/

ChromeとFirefoxでテストしましたが、両方のブラウザに問題があります。どんな助けでも大歓迎です。ありがとう！

4

2 に答える 2

1

なぜそれが起こっているのか完全にはわかりませんが、CSSにもかかわらず、リストアイテムの一部がのdisplay: list-item;代わりに出てきます。display: inline-block;

をに設定するul > liとli、問題が解決するようです：http: //jsfiddle.net/RichardTowers/rZuRt/

于 2012-05-20T17:18:38.960 に答える
0

引き続き使用できますdisplay: inline-blockが、すべてのアイテムの前後に空白を追加する必要があります。

$（'ul＃source'）。sortable（{
    ヘルパー：'クローン'、
    connectWith：'ul＃dest'、
    開始：function（event、ui）{
        $（ "ul＃source> li"）。eq（$（ui.item）.index（））。after（
            $（ui.item）.clone（）。addClass（'clone'）。show（）
        ）;
        $（'。sortable-placeholder'）。before（''）.after（''）; //ここに空白を追加します
    }、
    変更：function（event、ui）{
        $（'。sortable-placeholder'）。before（''）.after（''）; //ここに空白を追加します
        ui.item.before（''）.after（''）; //ここに空白を追加します
    }、
    削除：function（event、ui）{
        $（ "ul＃source> li"）。removeClass（'clone'）;
    }、
    停止：function（event、ui）{
        $（ "ul＃source> li.clone"）。remove（）;
    }、
    プレースホルダー：'sortable-placeholder'、

}）;
于 2016-12-13T10:06:21.880 に答える