Выбор и перетаскивание jQuery для создания окна, похожего на Windows Explorer - PullRequest
5 голосов
/ 17 декабря 2010

Теперь я сталкиваюсь с другой вещью, которую я не могу понять, как это сделать.

Я новичок в jQuery, и я пытаюсь сделать значок перетаскиваемым, и когда вы опускаете его впапка (.folder div) Она будет перемещена туда.

  1. Перетащите значок (я знаю, как его перетащить, но он виден только в родительском div, а не на всей веб-странице.)
  2. Перетащите папку на #navbar (слева) (Опять же, я не могу понять, как сделать так, чтобы ее можно было сбрасывать через определенный div)
  3. Удалите div, перемещенный в исходном содержимоми переназначить все остальные div
  4. Вызовите страницу php, чтобы переместить файл, связанный с этим div, в выбранный каталог

div в центре страницы (я хочу, чтобы они перетаскивались)значки, когда вы перетаскиваете их, а затем опускаете в папку слева, они перемещаются туда.

Здесь вы можете увидеть, как это выглядит (лучше с помощью Firefox): http://narks.xtreemhost.com/

Это только тестовая страница, чтобы показать вам.Кто-нибудь может помочь мне с этим, пожалуйста?

Чтобы узнать структуру веб-страницы, см. Проводник Windows 7 в макете CSS (Еще раз спасибо Ивану Иваничу за его драгоценную помощь1)

РЕДАКТИРОВАТЬ jQuery Drag & Drop:

$( "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) {
    }
});

1 Ответ

4 голосов
/ 17 декабря 2010

Я очень рекомендую jqueryui. Демоверсии здесь: http://jqueryui.com/demos/. Обратите внимание на ссылку на их Выбираемые и Перетаскиваемые объекты.

Кроме того, после быстрого сканирования ваших проблем, похоже, что более конкретным решением будет Sortable, который я люблю. Вот сортировка из двух списков со смешиванием списков: http://jqueryui.com/demos/sortable/#connect-lists

Обновление: вы также заявляете, что вам нужно покинуть содержащий div и тому подобное. Вот конкретная страница о границах для перетаскиваемого: http://jqueryui.com/demos/draggable/#constrain-movement. И вообще, обратите внимание на ссылки на различные примеры на правой боковой панели для каждой из функций jQueryUI. Они представляют все, что доступно из коробки. Если вам нужно сделать все возможное, отправьте свою реализацию людям jqueryUI. Кто знает, это может стать следующей функцией следующей версии jqueryUI.

...