Как реализовать пользовательский интерфейс «перетащить нить» на веб-сайте?

Question

Мне было интересно, как лучше всего реализовать какой-нибудь пользовательский интерфейс "drag n drop"?

Я имею в виду, что будет одна главная страница, и каждый щелчок по ссылке (например, другие разделы, такие как about, gallery, contact form) откроет новый элемент drag n drop поверх этой главной страницы. Что-то вроде рабочего стола Windows, где вы можете перемещать окна своих приложений по экрану.

Было бы лучше вызывать различные функции с AJAX при нажатии на ссылку? Как ссылка "gallery" будет вызывать функцию gallery и извлекать динамически сгенерированное содержимое этого "окна" с помощью вызова AJAX, а затем просто загружать этот материал в некоторый div? Или для этого лучше подойдет какой-то другой подход?

Я надеюсь, что смог объяснить это достаточно ясно. Я ищу правильный «шаблон проектирования» для реализации этого. Все предложения приветствуются! :)

Answer 1

Сначала я предлагаю использовать jQuery для создания перетаскивания
http://jqueryui.com/demos/draggable/

Я уверен, что вы можете найти множество примеров перетаскивания для jQuery

У меня есть библиотека перетаскивания JavaScript JavaScript, - до изучения jQuery. Вот несколько примеров на Yahoo. http://developer.yahoo.com/yui/examples/dragdrop/dd-basic.html

Надеюсь, эта помощь для начала.

Есть также все готовые существующие почти полные системы пользовательского интерфейса в интернете. Вот один http://www.smartclient.com/, но есть еще ....

https://github.com/mui/mochaui
http://www.extjs.com/

также этот вопрос может дать вам идеи Что такое хорошая инфраструктура пользовательского интерфейса очень высокого уровня для JavaScript?

Answer 2

HTML 5.0 предлагает встроенное перетаскивание, но вам, вероятно, потребуется использовать Draggable и Droppable из библиотеки jQuery UI.

Answer 3

Dojo Toolkit предоставляет простой способ определения элементов DnD.

<div dojoType="dojo.dnd.Source" class="container">
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Epsilon</strong></div>
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Zeta</strong></div>
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Eta</strong></div>
    <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Theta</strong></div>
</div>

См. Живой пример . Подробнее о Dojo DnD в DojoCampus .

Answer 4

Я бы порекомендовал использовать html5 drag and drop, потому что даже если это ужасный API, он открывает множество возможностей, например, например, перемещение ваших «окон» между вкладками браузера. Недавно я написал низкоуровневый модуль drag-and-drop, который абстрагирует почти все странные странности от API-интерфейса drag-and-drop html5. Все, что вам нужно сделать, это создать несколько абсолютно расположенных «окон» с некоторой ручкой перетаскивания и сделать что-то вроде этого:

var startMouse, startWindow
dripDrop.drag(dragHandle, {
    dragImage: true, // default drag image
    start: function(setData, e) {
      setData('window', someWindowId)
      startMouse = {x:e.pageX, y:e.pageY}
      startWindow = {x: yourWindow.style.top, y: yourWindow.style.left}
    },
    move: function(position, e) {
      yourWindow.style.top = startWindow.x + (position.x-startMouse.x)
      yourWindow.style.left = startWindow.y + (position.x-startMouse.y)
    }
})
dripDrop.drop(myDropzone, {
    drop: function(data, pointer, e) {
        // maybe you want do do something on dropping a window in a particular place?
    }
})

Проверьте модуль здесь: https://github.com/fresheneesz/drip-drop

Answer 5

Способ, который вы описали, звучит как хороший способ реализовать это да. Я не знаю, есть ли разные подходы. Я реализовал нечто похожее на предыдущем сайте (www.ponyhof.be), хотя нет возможности его применения. Вы можете взглянуть на код, это не совсем красиво, но работает.

На этом сайте я создал одну главную страницу с пустой информационной панелью (перетаскиваемой), куда я загружал информацию через Ajax.

С тех пор, как я сделал этот сайт, я узнал некоторые вещи, которые облегчили бы реализацию (так что теперь я сделал бы это по-другому). Более конкретно, я бы лучше использовал делегат-метод jQuery, который может автоматически прикреплять действия к ссылкам, загружаемым через ajax (на ponyhof.be я прикреплял их после запуска события ajaxComplete).

Но в целом я думаю, что то, что вы предлагаете, звучит как хороший способ создания такого интерфейса, и я не нашел ничего лучшего.