5

私は今、どうすればいいのか分からない別のことに直面しています。

私はjQueryが初めてで、アイコンをドラッグ可能にしようとしています。フォルダー（.folder div）にドロップすると、そこに移動します。

  1. アイコンをドラッグします (ドラッグする方法は知っていますが、Web ページ全体ではなく、親 div にのみ表示されます)。
  2. #navbar (左側) のフォルダーにドロップします (繰り返しますが、特定の div にドロップできるようにする方法がわかりません)。
  3. 元のコンテンツで移動した div を削除し、他のすべての div を再配置します
  4. PHP ページを呼び出して、この div に関連付けられたファイルを選択したディレクトリに移動します

ページの中央にある div (ドラッグ可能にしたい) はアイコンです。それらをドラッグして左側のフォルダーにドロップすると、そこに移動します。

ここで、それがどのように見えるかを見ることができます (Firefox を使用した方が良い) : http://narks.xtreemhost.com/

これは、お見せするためのテストページです。誰でも私を助けてくれますか？

Web ページの構造を知るには、CSS レイアウトの Windows 7 エクスプローラーを参照してください(Ivan Ivanić の貴重な助けに感謝します1)。

EDIT jQuery ドラッグ & ドロップ:

$( "div.explorer_icon" ).draggable({
    opacity: 0.50,
    revert: true,
    distance: 30,
    zIndex: 9999,
    scroll: false,
    appendTo: 'body',
    containment: 'window',
    helper: 'clone'
});
$( "#navbar div.item_list" ).droppable({
    accept: '.explorer_icon',
    hoverClass: 'item_list_hover',
    tolerance: 'pointer',
    drop: function(event, ui) {
    }
});
4

1 に答える 1

4

jqueryui を強くお勧めします。デモはこちら: http://jqueryui.com/demos/ . Selectable および Draggable オブジェクトへのリンクに注意してください。

さらに、あなたの問題を簡単にスキャンすると、より具体的な解決策は、私が大好きな Sortable になるようです。リストが混在する 2 つのリストを並べ替え可能なものを次に示します: http://jqueryui.com/demos/sortable/#connect-lists

更新：含まれているdivなどを残す必要があることも述べています。ドラッグ可能な境界に関する特定のページは次のとおりです: http://jqueryui.com/demos/draggable/#constrain-movement。そして一般的に、jQueryUI の各機能の右側のサイドバーにあるさまざまな例へのリンクに注意してください。これらは、すぐに使用できるすべてのものを表しています。以上のことが必要な場合は、実装を jqueryUI 担当者に送信してください。jqueryUI の次のバージョンの次の機能になるかもしれません。

于 2010-12-16T22:46:13.430 に答える