GRID ドラッグ行のコード例_JavaScript スキル
-------------------------- GRID 行ドラッグのサンプルコード 単一行ドラッグ-------------- -- ------------
//最初の GRID を作成します
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDdGroup',//ここに 2 番目の GRID がありますddGroup
store : firstGridStore,
enableDragDrop: true,//True は、GridPanel
で選択された行のドラッグ動作を開始することを意味します...他の属性は省略されます
});
//2 番目の GRID を作成します
var SecondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDdGroup',//ここに最初の GRID
store の ddGroup があります : SecondGridStore,
enableDragDrop: true,//True は、GridPanel
で選択された行のドラッグ動作を開始することを意味します...他の属性は省略されます
});
//最初の GRID を作成します ddGroup
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget (firstGridDropTargetEl , {
ddGroup : 'firstGridDdGroup', //2 番目の GRID の ddGroup と同じ
copy : true,
notifyDrop : function(ddSource, e, data){
function addRow( record, Index, allItems) {
var foundItem = SecondGridStore.find('name', Record.data.name);
if (foundItem == -1) {
firstGridStore.add(record); > firstGridStore.sort('name', 'ASC');
ddSource.grid.store.remove(record);
}
}
Ext.each(ddSource.dragData.selections ,addRow );
return(true);
}
)};
var SecondGridDropTargetEl = SecondGrid.getView().el.dom.childNodes[0].childNodes[1];
var SecondGridDropTarget = new Ext.dd.DropTarget (secondGridDropTargetEl ,{
ddGroup : 'firstGridDdGroup',//最初の GRID の ddGroup と同じ
copy : true,
notifyDrop : function(ddSource, e, data){
function addRow( record, Index, allItems) {
var foundItem = SecondGridStore.find('name', Record.data.name);
if (foundItem == -1) {
SecondGridStore.add(record); > SecondGridStore.sort('name', 'ASC');
ddSource.grid.store.remove(record);
}
}
Ext.each(ddSource.dragData.selections ,addRow );
return(true);
}
});

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









フロントエンドのインタビューでは、CSS を使用してサイコロや麻雀のレイアウトを実装する方法をよく質問されます。以下の記事では、CSSを使用して3Dサイコロを作成する方法(FlexおよびGridレイアウトで3Dサイコロを実装)を紹介しますので、ご参考になれば幸いです。

CSS レイアウト フレームワーク: 一般的に使用される 5 つのレイアウト フレームワークを探索する はじめに: Web デザインでは、レイアウトは重要な部分です。 CSS レイアウト フレームワークは、さまざまなレイアウト スタイルを備えた Web ページを迅速に構築するのに役立ちます。この記事では、一般的に使用される 5 つの CSS レイアウト フレームワークを紹介し、読者がこれらのフレームワークをよりよく理解して使用できるように、具体的なコード例を示します。 1. ブートストラップ: ブートストラップは、現在最も人気のある CSS レイアウト フレームワークの 1 つです。豊富なコンポーネントと強力な応答機能を備えており、

CSS の相対レイアウト プロパティの詳細な説明: 位置と相対 フロントエンド開発では、開発者が直面する必要がある問題がレイアウトであることがよくあります。ページ上の要素の位置をより適切に制御するために、CSS にはさまざまなレイアウト メソッドが用意されています。中でも相対レイアウトは非常に一般的なレイアウト方法であり、position属性とrelative属性を利用することで要素の位置や大きさを柔軟に調整することができます。 Position 属性は、要素の配置方法を定義するために使用されます。共通の値

CSS パネル レイアウト プロパティ: グリッドとグリッド テンプレート列 最近の Web ページ レイアウトでは、パネル レイアウトは Web コンテンツをグリッドに配置できる一般的な設計方法です。パネルレイアウトを実現するには、CSSのグリッドレイアウト属性とgrid-template-columns属性が鍵となります。 1. グリッド レイアウト属性の概要 グリッド レイアウト属性は、CSS でグリッド レイアウトを作成するために使用される属性です。

ページ レイアウトとレスポンシブ デザインを実装するための UniApp の実装スキル はじめに: UniApp は、iOS、Android、H5 などの複数のプラットフォーム向けのアプリケーションを同時に開発できる、Vue.js フレームワークに基づくクロスプラットフォーム開発ツールです。この記事では、UniApp を使用してページ レイアウトとレスポンシブ デザインを実装する方法を紹介し、いくつかの実用的なコード例を示します。 1. ページ レイアウト Flex レイアウト Flex レイアウトは、ページ レイアウトで一般的に使用される方法であり、さまざまな画面サイズやデバイスに自動的に適応できます。ユニアプリ内

CSS アダプティブ レイアウト属性の最適化のヒント: フレックスとグリッド 最新の Web 開発では、アダプティブ レイアウトの実装は非常に重要なタスクです。モバイルデバイスの普及と画面サイズの多様化に伴い、Web サイトがさまざまなデバイスで適切に表示され、さまざまな画面サイズに適応できることが必須の要件となっています。幸いなことに、CSS には、アダプティブ レイアウトを実装するための強力なプロパティとテクニックがいくつか用意されています。この記事では、よく使用される 2 つのプロパティ (フレックスとグリッド) に焦点を当て、具体的なコード例を示します。

HTML チュートリアル: グリッド平均レイアウトにグリッド レイアウトを使用する方法 Web デザインでは、グリッド レイアウト (GridLayout) が一般的に使用されるレイアウト方法であり、Web コンテンツを効果的に複数の列に分割し、柔軟な配置とレイアウトを実行できます。このチュートリアルでは、HTML および CSS グリッド レイアウトを使用してグリッド平均レイアウトを実装する方法を紹介し、具体的なコード例を示します。 1. グリッドレイアウトとは何ですか?グリッドレイアウトとは、ページを複数の列に分割し、行と列に基づいて配置するレイアウト方法です。

CSS テーブル レイアウト属性の解釈: テーブルとディスプレイ フロントエンド開発では、テーブル レイアウトが一般的に使用されるレイアウト方法です。 CSS はいくつかのテーブル レイアウト プロパティを提供しますが、最も一般的に使用されるのはテーブル プロパティと表示プロパティです。これら 2 つのプロパティについては以下で詳しく説明し、具体的なコード例を示します。 1. テーブル属性 table は、要素をテーブル レイアウトに設定するために CSS で使用される属性です。要素の表示属性をtableに設定することで、要素のレイアウトを変更できます。
