VPF::Создание плагина для генерации плейлиста

Ripper

Дата 25.7.2013, 16:12 (ссылка)

(нет голосов)

Загрузка ...

Lonely soul...

Профиль
Группа: Участник
Сообщений: 920
Регистрация: 30.6.2004
Где: г. Москва

Репутация: нет
Всего: 23

Добрый день.

Стоит задача (приблизительная на данном этапе): есть сущность "элемент контента" (например картинка). Скажем, имеем у пользователя 10 загруженных картинок. Нужно сделать на клиентской стороне следующее:

С помощью drag&drop-а перетаскиваем картинки на полоску, которая представляет из себя временную прямую. Типа как у плееров. При добавлении для картинки указывается сколько секунд она будет показываться. Когда перетаскиваем - она занимает определенную площадь прямой. Можно мышкой изменять границы. Можно запихнуть несколько картинок, переставлять местами, удалять и т.п. При этом рассчитываются автоматически временные метки. Прямая ограничена определенным временем (скажем, минуту в сумме).

Это все должно выглядеть красиво, и юзабельно.

Сам я использую только jQuery, и не совсем представляю себе как тут поступить. Примеры на drag&drop в jquery-плагинах обычно демонстрируют работу со списками, либо окошками, но визуальный красивый конструктор плейлиста из итемов такого не видел

Еще я использовал raphaelJS, думаю может на ней нарисовать это? Там возможностей вроде побольше

--------------------

"Он знает: надо смеяться над тем, что тебя мучит, иначе не сохранишь равновесия, иначе мир сведет тебя с ума" - Над кукушкиным гнездом

Sanchezzz

Дата 25.7.2013, 16:50 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

Вам поможет Jqueri UI

dragtable перетаскивает.
droptable слушает
sorttable сортирует.

Смотрите документацию по методам и параметрам.

Вот например этот список нужно перетаскивать

Код


<div class="box_storage">
   <div class="item" data-file="" data-id="">

         тут можно текст разместить еще какие не будь элементы ...
    </div>
</div>

<div class="svalka"></div>

Код


$(function(){
   // это клонирует и перетаскивает див, можно указать конкретную часть за какую можно перетаскивать handle
   $(".box_storage .item").draggable({helper: 'clone'});

   // зададим область куда будем помещать переданные элементы.
   $('.svalka').droppable({
       // accept:  функция с горой логикой что разрешаем что нет или селектор класс что разрешено принимать
      /*
     пример из моего проекта 
     accept:function(obj){
                if (obj.is('.component_item')){
                    return true;
                }else if(obj.is('.component_run[data-parent]')){
                    var parent = obj.attr('data-parent');
                    if(parent > 0) return true;
                }
                return false;
            },*/
     // Вызывается всегда как только элемент был отпущен над поверхностью
     drop: function(ev, ui) {
        
         if (ui.draggable.is('.item')){
           // это условие сработает только один раз при перетаскивание и отпускание элемента очень полезно=)
          // создадим див
           var  e = $('<div>' , {
            'class':'item_playlist',     
            'style':'', 
            'data-id': tmp_id,  // tmp ID  
            'new':true   
        });
             $(this).append(e);  // добавили туда куда бросили...

         }}
     });



});

Этим можно вообще тупо создать элементы и перескивать из одного списка в другой
sortable({
connectWith: '.column', // позволяет из одного списка перекидывать в другой сортируемый список
helper: 'original',
}).disableSelection();
Как будут выгладить элементы дело верстки.

--------------------

Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.

Ripper

Дата 13.8.2013, 14:04 (ссылка)

(нет голосов)

Загрузка ...

Lonely soul...

Профиль
Группа: Участник
Сообщений: 920
Регистрация: 30.6.2004
Где: г. Москва

Репутация: нет
Всего: 23

Ковырялся ковырялся, но желаемого результата никак не добьюсь smile

Итак, вот пример: http://jsfiddle.net/98pK6/2/

1. Есть ul.pool из него берутся итемы и переносятся в ul#playlist
2. Если в draggable задать connectToSortable то я могу скажем перекинуть несколько итемов. потом перекинуть еще один между уже добавленными - то что нужно. Однако, на примере выше, допустим добавляем просто два итема. и первый ресайзим - получается какая-то ерунда. Плюс еще итем добавляется когда закончился revert а не сразу
3. Если убрать connectToSortable, а при drop добавлять элемент вручную, то ресайзится вроде нормально, но нельзя запихнуть между итемами, и при перетаскивании копируется элемент
4. В идеале хорошо было бы ресайзить в обе стороны, но в этом случае там вобще ничего не работает как надо

--------------------

Sanchezzz

Дата 14.8.2013, 18:07 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

resizable если используете там вроде нужно позицию в relateve ставить и убирать всякие там top left
у resizable есть события stop в них можно побороть эти глюки

--------------------

Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »