問題タブ [knockout-sortable]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
321 参照

javascript - KnockoutSortable を使用した CancelDrop

私は、cancelDrop オプションを Knockout ソート可能バインディングで使用できるようにしようとしています。現在、デバッグのためだけに、すべての移動をキャンセルしようとしています。

これは私のマークアップです

これは私の beforeMove 関数です

デバッガー ステートメントのコメントを外すと、関数がヒットし、cancelDrop プロパティが設定されていることがわかります。

必要に応じて実行します。しかし、動きはそのままです。

特に奇妙なのは、移動したアイテムが新しい場所に植えられた後に beforeMove 関数が呼び出されるように見えることです。その時点の前にこれが呼び出されることを期待する必要がありますか?

0 投票する
3 に答える
3864 参照

jquery - jQuery UIで並べ替え可能なちらつきをなくすにはどうすればよいですか?

トランプの並べ替え可能なリストがあります。カードの上部だけを表示するために、各カードに負の下部マージンを付けました。これを行うと、jQueryのsortableは非常にちらつき、使いにくくなります。どうすればこのフィルカーを排除できますか? ちらつきに加えて、ドラッグするための適切な垂直方向の配置を取得するにはどうすればよいですか?プレースホルダーをリストのそれらの側に移動するには、リストの上または下に移動する必要があるようです。

コードをhttp://jsfiddle.net/otac0n/wDTwX/に置いて、その感触をつかむことができるようにしましたが、その要点は次のとおりです。

0 投票する
2 に答える
647 参照

jquery-ui - KnockoutJS と JqueryUI Sortable で UI が完全に更新されない

まず第一に、私の下手な英語で申し訳ありません!

とにかく、Knockout JS と Jquery UI に基づいたシンプルなタスク マネージャーを作成しようとしています。いくつかの調査の後、KO を JqueryUi のソータブルに接続するのに役立つ小さなプラグインを見つけました。ここでそれについて読むことができます: http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html

プラグインは、監視可能な配列の順序を更新するのに非常にうまく機能しますが、配列内の位置に基づいて要素の値を更新する必要もありました。各ソート後に配列全体を更新しようとしましたが、奇妙な動作に気付きました: UI は同じままですが、配列を JSON に送信すると、正しい値で更新されます!

ここで私のコードのスニペットを見つけることができます: http://jsfiddle.net/ingro/mz3MK/

並べ替え可能なリストでいくつかの要素を移動してみて、UI と [印刷] ボタンで表示される値の違いを確認してください。

編集: 最初の要素 (test#1) をソート可能なリストの一番下に移動してみてください。要素の属性 'time' は同じ (07:00) のままです。並べ替え可能なリストの 2 番目の場所に移動すると、属性「時間」が「10:00」になっていることがわかります。実際、UI は何かをドラッグしたときにのみ更新され、ドラッグされた要素のみがドラッグ前の状態に更新されます。しかし、配列の値を出力すると、常に更新されていることがわかります:\

これについて私を助けることができる人に感謝します!

0 投票する
1 に答える
5118 参照

jquery - jQueryUIからknockout.jsへのクリックイベントをトリガーします

Jquery-ui sortableのコード例を使用すると、AndroidまたはIOSに基づくタッチデバイスでは機能せず、iOSデバイスでjQueryUIsortableをタッチ有効にします。knockout.jsクリックハンドラーとjQueryUIsortableを登録するときに問題が発生します。同じ要素で。knockout.jsハンドラーは、タッチ対応デバイスでは起動しませんが、デスクトップ/ラップトップでは起動します。

移動と呼ばれるフラグを追加すると、クリックハンドラーをトリガーする必要がある時期を追跡できます。これには、// TRIGGER HERE以下のマークが付いています。

問題は、 jQueryUIからknockout.jsへのクリックイベントをどのようにトリガーするかです。

this.element.click()、、、などthis.element.get().click()を試しましthis.element.trigger("click")たが無駄になりました。

アップデート:

コードをハッキングして:

  • html.elementが正しいものではないように見えるため、実際のターゲットを追跡します
  • 正しいターゲットでクリックイベントをトリガーする

これで、knockout.jsのクリックイベントで正常に動作します。

0 投票する
1 に答える
15235 参照

knockout.js - ノックアウト「if」バインディングはソート可能なリストの式では機能しませんか?

Knockout および Knockout-sortable プラグインで作成した To-do のようなソート可能なリストで別の問題が発生しました。

現在の時間に配置された要素の下に赤い区切り記号を配置し、その区切り記号の前に要素がドロップされた場合は並べ替えをキャンセルする必要があります。

「目に見える」バインディングを試してみましたが、何らかの方法で機能しますが、目に見えるバインディングはDOM要素を非表示にするだけで、ソート可能なarrayIndexを台無しにして、不要な要素を追加します。

「if」バインディングは、必要な場合にのみDOM要素を挿入するため、より優れていますが、visibleで使用した式は常にtrueと評価され、理由がわかりません...

これがフィドルです:http://jsfiddle.net/ingro/VaqqF/

どんな助けでも大歓迎です、ありがとう!

0 投票する
1 に答える
2226 参照

knockout.js - アイテムが他の(親/子)要素に「ドロップ可能」になるのを防ぎます

私はknockout-sortable.jsを使用して、ユーザーがアイテムをドラッグアンドドロップして異なる順序を指定できるようにしていますが、ページに複数の「ドロップゾーン」があると問題が発生します。私はネストされたセットを持っています。それらはすべてソート可能ですが、互換性はありません。

私のコード:

そして他の時点で:

これで、「別のblabla」を「Blabla」にドラッグアンドドロップするだけで、エラーが発生します。どうすればこれを防ぐことができますか?

0 投票する
1 に答える
125 参照

knockout.js - ソースリストとしてドラッグ可能を使用すると、ソート可能に追加されたアイテムが一緒にリンクされますか?

ハッキングされたサンプルを許してください

http://jsfiddle.net/marcmeans/SqrBf/1/

利用可能な学生から Table3 にアイテムを 2 回追加してから、Table3 から Table2 に 1 つを移動しようとすると、両方とも消えます。

また、Table3 に追加されたアイテムの新しい GUID を生成しているときに、arg.item がクローンではなくソース リスト内のアイテムへの参照であるように見えることにも注意してください。これにより、ノックアウトにリンクが作成され、1 つを更新するとすべてが更新されます。

ここで何か間違ったことをしていると思いますが、何が原因なのかわかりません。

0 投票する
1 に答える
817 参照

javascript - ノックアウト-並べ替え可能な水平リストは、アイテムをドラッグするとアイテムを垂直にプッシュします

ドラッグアンドドロップのソート可能なリストにノックアウトソート可能を使用して、ノックアウト.jsでアプリケーションを作成しています。縦のリストがあり、それらの各項目の中に横のリストがあります。垂直方向のリストは問題なく動作しますが、水平方向のリストで項目をドラッグしようとすると、そのリスト内の残りの項目が、ドラッグされている項目に対して上下に押し出されます。水平リストは次のように定義されます。

ここで完全なアプリケーションを表示できます:
リンクはもう存在しませんhttp://bugs.jqueryui.com/ticket/6702

にある ものを含め、見つけたすべての提案を試しましたが、これまでのところ何も機能していません。水平方向の並べ替え可能なリストを機能させたいと思っているので、誰か提案があれば、本当に感謝しています。

0 投票する
1 に答える
829 参照

javascript - ネストされたソート可能なノックアウトがサブリストのドロップを許可しないようにするにはどうすればよいですか?

ノックアウトソート可能リストがあり、その中にノックアウトソート可能リストがあります。基本的に、これは基本的な「利用可能な学生」の例(http://jsfiddle.net/rniemeyer/UdXr4/)ですが、テーブルも並べ替え可能にしたいだけです。

私はこれをほとんど機能させていますが、テーブルを他のテーブルにドラッグできないという問題があります。

生徒がテーブルリストにドロップされないように、テーブルリストにallowDrop関数を追加することができました。

だから私は学生リストにテーブルを入れられないようなものを入れたいと思っていましたが、私の人生ではそれを理解することはできません。私はIDを調べたり、性別のプロパティが利用可能かどうかを確認したりしました(学生のみが使用できるため)。

jsfiddleを編集して、自分の状況に近づけました。テーブルをドラッグすると、別のテーブルにドロップできることがわかります。 http://jsfiddle.net/nYSLq/1/

どんな助けや提案も大歓迎です。

0 投票する
1 に答える
954 参照

javascript - Knockout.js、競合するjQuery.tmplおよびKnockout-Sortableを使用したFlashプラグインの制御

Knockout.jsのネイティブテンプレート機能を使用してFlashオブジェクトを埋め込むためのHTMLをレンダリングしようとしています。jQuery.tmplは完全にうまく機能しますが、Knockout-sortableプラグインとの競合のため、使用できません。

ネイティブテンプレートを使用したフラッシュプラグインの例を次に示します。http://jsfiddle.net/7y3ub/35/ Chrome
では、プレーヤーが表示されません。Firefoxでは、チェックボックスがオンになっているときにチャネルを変更すると、プレーヤーが表示されます。ただし、チェックボックスを再度オンにすると、プレーヤーは再び消えます。

ページの期間中にフラッシュプラグインのロードとアンロードのインスタンスが多数存在する可能性があるため、「if」バインディングが必要です。

私の知る限り、オブジェクト/埋め込みタグが表示されているDOMに入るまでに、HTMLはすべて適切に配置されている必要があります。これが、私の場合、jQuery.tmplが優れている理由です。自分でHTML文字列を作成しようとしましたが、新しいマークアップに含まれるバインディングを適用および維持する方法がわかりません。

結論として、バインディングをサポートしながらHTMLを即座にレンダリングする方法、またはjQuery.tmplとKnockout-sortableを相互に互換性のあるものにする方法を見つける必要があります。


非互換性の例を次に示します。http: //jsfiddle.net/7y3ub/41/
jQuery.tmplを参照しないだけで、この例のコードは完全に機能します。http://jsfiddle.net/7y3ub/42/

コンソールのエラーメッセージは、コンテキストが適切に調整されていないか、暗黙のforeachが実行されていないことを示しているようです。SubItemオブジェクトが単純な文字列に置き換えられるこの調整では、メッセージはさらに珍しくなります:http: //jsfiddle.net/7y3ub/43/