C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[4]: JQueryのsortableについて

分類:[JavaScript]　

こんにちは。

今Javascript(jQuery)でsortableを使った一覧のDrag＆Dropの画面を扱っています。
ソースは以下のように生成しているのですが、sortableの処理がかなり遅くなっています。

画面も動的に変わると言う事で、イベントリスナーの破棄を施していない(デフォルト上書きされる？)と言う事もあり、
リファレンスを見つつ実装しても(sortable("destoy")や空セット、innerHtmlで空にするなどしても)全く改善されず困っています。

画面上のイベントリスナをjQuery句で取らない形でも良いのですが、破棄する方法はどのようにすれば実現できるでしょうか？

お聞かせ頂ければ幸いです。よろしくお願い致します。

$("#treeId").find(".sortable").sortable({
			axis: "y",
			opacity: 0.6,
			cursor: "move",
			distance: 5,
			delay: 200,
			containment: "#treeId",
			connectWith: ".connectedSortable",
			placeholder: "ui-state-highlight",
			refreshPositions: true,
			start: function(event, ui) {
			},
			stop: function(event, ui) {
			},
			sort: function(event, ui) {
			}
		}).disableSelection();

※「$("#treeId").find(".sortable")」のセレクタが遅いと言う事はありませんでした。

■No85295 (ぼぼさん) に返信

> 今Javascript(jQuery)でsortableを使った一覧のDrag＆Dropの画面を扱っています。

sortable って何ですか？

アップされているソースを見るかぎり jQuery UI の sotable のようですが、それですか？

Sortable
http://jqueryui.com/sortable/

> ソースは以下のように生成しているのですが、sortableの処理がかなり遅くなっています。

そう言われても、そのソースだけでは「処理がかなり遅くなって」という現象は第三者には見え
ないですし、ましてや、何が遅くしている原因なのか、どこがボトルネックなのかの切り分けは
無理そうです。

イベントリスナーを疑っておられるようですが、アップされたソースにある、start, stop, sort
に設定された匿名関数のことではないですよね？

何のイベントでどのようなリスナーなのですか？　そもそも、それが原因であることはどうやって
調べたのでしょう？　それが原因に間違いないのはどのように確認されたのでしょうか？　

■No85298 (WebSurfer さん) に返信

ご返信ありがとうございます。

> Sortable
> http://jqueryui.com/sortable/

はい。このsortableです。

> そう言われても、そのソースだけでは「処理がかなり遅くなって」という現象は第三者には見え
> ないですし、ましてや、何が遅くしている原因なのか、どこがボトルネックなのかの切り分けは
> 無理そうです。

画面的にはツリー要素のフォルダカテゴリ描画エリアがあり、もう一つ別に一覧の描画エリアがあります。
これをD&Dでフォルダの所属を変えたり、表示順を変えたりします。(分かりやすく言うとwindowsのエクスプローラ)

ここには書いてませんが、sortableの他にdroppableも併用しており、この処理の前にバインディングさせてます。
ツリー要素ははじめ(onload)から階層以下全てhtmlであるわけではなく、フォルダをクリックした度に通信して、
配下のフォルダ要素のHTMLを取得しています。

ですので、通信毎に毎回このsortableを呼ばなければいけないのですが、ここでログで時間を表示するようにした所、
このsortable()が終わるまで１０秒くらいかかっているのが確認できました。

selectorに問題が無いのは、このようにやってみたからです。

var aa = $("#treeId").find(".sortable");

console.log("@1"+newDate().getミリ秒);

$("#treeId").find(".sortable").sortable(...

console.log("@2"+newDate().getミリ秒);

> イベントリスナーを疑っておられるようですが、アップされたソースにある、start, stop, sort
> に設定された匿名関数のことではないですよね？
>
> 何のイベントでどのようなリスナーなのですか？　そもそも、それが原因であることはどうやって
> 調べたのでしょう？　それが原因に間違いないのはどのように確認されたのでしょうか？　

はい。まだ原因を特定できているわけではないのですが、このsortableAPIの中で必ず、mouseupやmousedownなどのイベントを
発行してるしてるものと思っていますが、それをクリアしないで何度も何度もここを呼ぶ為にイベントが都度溜まってしまっているのでは
ないか、と疑ってます。

ですので、一旦画面上のイベントリスナーを取得してクリアできれば改善もされるのではないかと期待しています。

よろしくお願い致します。

■No85307 (ぼぼさん) に返信

かなり複雑なようですね。

せっかく説明していただいたのですが自分は理解できず、話についていけそうもありません。

お役に立てずすみません。他の方の回答をお待ちください。

■No85316 (WebSurfer さん) に返信

いえいえ、ありがとうございます。

昨日も調査していて、結局コア部の中を調べました。
結局↓の部分で１０秒ぐらいかかってしまっており、以下のようにした所一瞬で終わるようにもなり、動作的にも問題ないようです。

ただ、コア部の修正は他影響も含めてやりたくなく、inputのHTMLのデータを改ざんで済むようにしたいのですが・・

/*!
* jQuery UI Sortable 1.12.1
* http://jqueryui.com
*/
var widgetsSortable = $.widget( "ui.sortable", $.ui.mouse, {
...
　_setHandleClassName: function() {
　　var that = this;
　　this._removeClass( this.element.find( ".ui-sortable-handle" ), "ui-sortable-handle" );
　　$.each( this.items, function() {
//　　　that._addClass(　　　　　　　　　　　　　　　　　　　　　　　　　　←ここ
//　　　　this.instance.options.handle ?
//　　　　this.item.find( this.instance.options.handle ) :
//　　　　this.item,
//　　　　"ui-sortable-handle"
//　　　　);
　　　　that._addClass(this.item,"ui-sortable-handle");
　　} );
　},

C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[4]: JQueryのsortableについて

過去ログには書き込み不可