IE8で壊れた画像を表示するJquery Ui Sortable

StackOverflow https://stackoverflow.com/questions/815217

質問

クエリのソート可能な画像のコレクションがあります。アイテムはimgに設定されます（タブコントロールにあり、水平リストであるため、リストアイテムで並べ替えることができず、IE8を除くすべての場所で完全に機能します）プレースホルダーが壊れた画像を表示する標準準拠モードでも）。 IE8でプレースホルダーを非表示にするために使用できるCSS設定はありますか。試しました

visibility : hidden;

設定を試みました

content : url(transparent.gif);

どちらも効果がないようです。これを修正するにはどうすればよいですか？ Dom Explorer（またはIE8開発者ツールで呼び出されたもの）のように、表示されているCSSを調べる方法に関する提案は、マウスを離すとすぐに消えてDomになるため、imgが表示されません。 Explorerは、Firebugが行う方法をリアルタイムで更新しないようです。

編集：これは http://jsbin.com/irozu

を複製したものです。

例を単純化しましたが、他の問題は、タブ全体がスクロール可能で、スライダーで制御されることです。変更

display : inline;

to 

float : left;
アイテムのスクロール可能なリストがなくなったため、

は機能しません。また、なんらかの奇妙な理由で、スクロールバーがあり、「li」を使用する場合; ＆quot; img＆quot;の代わりにターゲットとして、sortableは動作を停止します。

更新された例は、 http://jsbin.com/ahawi にあります。

役に立ちましたか？

解決

  

プレースホルダーが壊れた画像を表示する場所。 IE8でプレースホルダーを非表示にするために使用できるCSS設定はありますか。試しました

壊れた画像が表示されるのは、jQuery UIが（あなたの場合）プレースホルダーにsrc属性が設定されていないIMG要素を作成するためです。この問題を解決するには：

  1. プレースホルダーオプションを設定しない または

  2. .showPlaceクラスを次のように変更します

    .showPlace {
   margin: 20px;
   overflow: hidden;
   width: 0; height: 0;
}

上記のコードは（存在しない）画像コンテンツを非表示にしますが、要素は表示したままにします。

ところで。私のテストケースでは、 visibility：hidden を .showPlace に設定してもうまくいきました

他のヒント

プレースホルダーを表示したくない場合は、ソート可能アイテムの placeholder オプションを設定しないでください 。

IE8のデフォルトのソート可能な動作に問題はありません。このホストされた例で説明した内容を再作成しようとしました： http://jsbin.com/osobu （ソート可能な画像は3番目のタブにあります。）

より多くのコードを提供するか、提供したサンプルを編集するだけで便利です（ http：// jsbinを介して.com / osobu / edit ）を使用して問題を再現します。

編集

コメントへの応答として、 items オプションを＆quot; li＆quot; に設定するだけで問題が修正されます。また、使用する必要があります

#images li { float: left; }

の代わりに 
#images li { display: inline: }

それ以外の場合、画像はドラッグ中にオフセットされます。

修正済みのデモは次のとおりです。 http://jsbin.com/osezu

修正し、コードをかなり削減しました。

主な問題は、ULではなくDIVをソート可能に設定していたことです

希望どおりに動作するようです： http://jsbin.com/egiwu

試すことができます： display：none; 。

別の回避策があります：

$('.mysortthings').sortable({
  start: function(event,ui) {
        $('.ui-sortable-placeholder').each( function() {
           this.setAttribute('src','/ico/unipixel.gif'); } );
       }
});

つまり、開始イベントハンドラーを設定します。これは、物事が始まるとすぐに、プレースホルダーimgの「src」属性を設定します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top