jqueryUI sortable を使用してソート可能なテーブルがあり、ソートに sildeUp と down の遅延があるため、スムーズに見えます。
しかし、ユーザーが要素がどこにドロップされるかがわかるように、プレースホルダー要素を破線の境界線でスタイル設定しています。
問題は、要素をドラッグすると、破線のプレースホルダーの高さが常にアニメーション化され、非常に見苦しく見えることです。
基本的には、十分なスペースができるまで破線の要素を非表示にしてから表示したいと考えています。現在、高さ 0 から完全な高さまでアニメーション化されています。十分なスペースができたら、フルハイトで表示した方がよいでしょう。
どうすれば遅らせることができますか?css() を使用して境界線を設定していますが、待機するように指示する方法がわかりません。
ここに私のコード
http://jsbin.com/ucopun/122/edit
$("#myTable tbody").sortable({
helper: fixhelper,
revert: 300,
placeholder: 'ui-placeholder',
'start': function (event, ui) {
ui.placeholder.html('<td class="uisort" colspan="3"></td>').slideUp(200);
ui.placeholder.children("td").css({'border': 'dashed 2px black'});
},
change: function (e,ui){
$(ui.placeholder).hide().slideDown(200);
}
});
$("#myTable tbody").on('sortstart', function(event, ui) {
$("td").css({'background-color': '#313131'});
$(ui.item).children("td").css({'background-color': '#fff'});
});
$("#myTable tbody").on('mouseup', function(event, ui) {
$("td").css({'background-color': '#fff'});
});