自身のコンテンツをソートし、その子を別のソート可能なオブジェクトにコピーできるドラッグアンドドロップソート可能なオブジェクトを設計する
私はしばらくの間私を悩ませているこの問題を抱えています。
Webアプリに2つ以上の並べ替え可能オブジェクトを含むインターフェイスがあります（並べ替え可能は、子コンテンツを再配置できるコントロールです）。例： http://yuilibrary.com/yui/docs/sortable/simple-sortable.html
私のモックアップは次のようになります：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
menusソート可能オブジェクトは、標準のソート可能オブジェクトと同じように動作します。
問題はPagesソート可能です。並べ替え可能にするために、コンテンツを並べ替えることができます。通常、予想される動作は、アイテムをクリックして押したままにし、元の場所からアイテムを削除し、アイテムが挿入される新しい場所のプレースホルダーを表示することです。
ただし、私の場合、このsortableには2つ目の目的もあります。 PagesからMenusのいずれかにアイテムをドラッグしている場合、代わりにそのアイテムのコピーが作成されます。通常、これを行う場合、pages並べ替え可能オブジェクトの元のアイテムはそのまま残され、コピーが作成されてカーソルまたは指に固定されます。
私のPagesソート可能オブジェクトはこれらの2つの動作を可能にする必要があるため、これらの機能をどのように明確にすべきかはわかりません。
pagesソータブル内のページを並べ替えることができます。pagesソータブル内のページのコピーをメニューソータブルにドラッグできます。
私はこのようなページ内のアイテムのスタイルを検討しました：
ただし、これは少し混乱する可能性があります。
- 点線の領域をクリックしてソート可能なメニューにドラッグし、ソート可能なページにアイテムがロックされていると混乱した場合はどうなりますか？
- ユーザーがドットの付いていない部分をクリックしてページを並べ替えたいが、コピーが作成されたために並べ替えられないことがわかった場合はどうなりますか？
- ドットのない部分をクリックするとコピーが作成されるという視覚的な表示がないという事実もマイナスです。
このような並べ替え可能な操作をユーザーフレンドリーで簡単に見つけられる方法で実現する方法について、実際にパターン/例はありますか？
可能であれば、ページの上部に、プロセスを説明する短い簡潔な説明を追加します。
さらに、またはその代わりに、それはあなた次第ですが、オブジェクトを自由にドラッグできますが、マウスが両方の領域を区切る垂直線を横切ると、コピーが生成されていることをユーザーに知らせるメッセージが表示されます。オリジナルはそのまま残ります。そのメッセージは右側の空の領域にある必要があるため、ドラッグアクションに影響を与えません。
また、デザインの下部にあるステータスバーのように見えるものを使用して、そこにメッセージを表示し、キーをドラッグアクションと組み合わせることができます。たとえば、Ctrlキーを押しながらドラッグすると、コピーが作成されます。これは、移動またはコピーできるアイテムにカーソルを合わせると、下部に説明されます。
ステータスバーを使用しない場合でも、ドラッグとキープレスを組み合わせるシステムを使用できます。空の領域の1つにメッセージを表示するだけで、それを目立たせます。
ドラッグアンドドロップには、それが自明ではない機能（ユーザーがアイテムをドラッグできることをどのように推測できるか）であるという使い勝手の問題があり、ドロップターゲットがソースと同じでない場合はさらにそうです。
これの主な解決策は、「アシスト」を含めることです-ドラッグできるものと場所を示すラベルを表示します。あなたのケースでは、メニュー見出しの下に「ページをここにドロップしてページへのリンクを追加する」を追加できます。
さらに、ドラッグの開始時に、ドロップターゲットをアニメーション化することを検討してください。たとえば、グロー効果で境界をアニメーション化します。