Drag & Drop с использованием jQuery UI

Владимир | | HTML, JavaScript, Web разработка.

jquery ui drag drop

В прошлый раз я рассказывал о перемещении блоков на странице в браузерах с поддержкой HTML5. Но, знаете, у меня последнее время складывается впечатление, что к тому времени как этим стандартом можно будет свободно пользоваться, он успеет устареть.

До сих пор часто требуется поддержка IE6, а перетаскивание объектов, о котором шла речь, не работает даже в IE8, и неизвестно, будет ли работать в девятой версии самого распространённого браузера. Рассчитывать же на то, что все пользователи вдруг откажутся от IE по-моему очень оптимистично.

В любом случае, решать сегодняшние задачи приходится доступными средствами. Это означает, что если вы не используете библиотек, то для перетаскивания объектов нужно создавать обработчики событий mousedown, mousemove и mouseup. Ничего запредельно сложного, но занятие это совсем не увлекательное. Поэтому, на мой взгляд, лучше использовать какую-нибудь библиотеку, например, jQuery UI.

Чтобы сравнить насколько отличаются её возможности от тех, которые нам предоставит HTML5, я сделал точно такой же пример, как и в прошлый раз, но с использованием jQuery UI.

Source

Рассмотрим его подробнее.

Страница имеет следующую разметку

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <title>jQuery UI Drag & Drop</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
    <script type="text/javascript" src="init.js"></script>
</head>
<body>
    <h1>jQuery UI Drag & Drop</h1>

    <div class="wrapper">
        <div id="block1">
            <div class="textBlock">Текст 1</div>
            <div class="textBlock">Текст 2</div>
            <div class="textBlock">Текст 3</div>
        </div>
        <div id="block2"></div>
    </div>
    
</body>
</html

На странице находятся два контейнера: block1 и block2. Первый содержит три блока (теги div с классом textBlock), которые можно переместить в block2. В заголовке страницы подключены библиотеки jQuery и jQuery UI.

Теперь взгляните на код, который выполняет все необходимые действия.

$(function() {
    $('.textBlock').draggable({
        helper:'clone'
    });
    $('#block2').droppable({
        hoverClass: 'dropHere'
        ,drop: function(event, ui) {
            $(this).append($('<div class="textBlock">' + ui.draggable.html() + '</div>'));
        }
    });
});

С помощью метода draggable мы делаем все элементы с классом textBlock перемещаемым. Параметр helper:'clone' указывает, что сам элемент должен оставаться на месте, а перемещаться будет его копия.

Чтобы сделать block2 «приёмником» перемещаемых элементов используется метод droppable. В параметре hoverClass указываем имя CSS класса, который будет присваиваться блоку, когда над ним находится перемещаемый элемент.

В параметре drop указываем обработчик события drop. Так же, как и в прошлый раз, здесь мы просто создаём новый элемент внутри контейнера block2. Получить доступ к перетаскиваемому элементу можно с помощью объекта ui.draggable, который передаётся во втором параметре обработчика.

Как видите, код получился даже короче чем в прошлый раз. И, кроме того, он работает во всех браузерах, поддерживаемых библиотекой jQuery. Более того, в jQuery UI входят компоненты вроде Sortable, которые значительно расширят её возможности.

Но у HTML5 есть два важных преимущества.

1) Потребление ресурсов. Попробуйте просто подвигать любой из блоков мышкой и одновременно посмотрите нагрузку на процессор. Думаю, результат будет виден невооружённым взглядом.

2) Поддержка браузером HTML5 означает, что вы сможете перетаскивать элементы как из другого окна, так и из другого приложения, а в случае с jQuery UI это невозможно.

Наверное, отличным решением была бы JS библиотека, подобная jQuery UI, но написанная с использованием возможностей HTML5… Хотя, без поддержки нового стандарта браузерах пользы от неё будет немного.

Удачи!

  • Этот метод мне как пользователю нравится больше. В прошлый раз блоки перетаскивались как-то «неохотно» что-ли. Тут же все гладенько. Блоки захватываются и встают на место без проблем.

    • Визуальные эффекты в HTML5 можно изменить. Вообще, поддержка canvas позволяет рисовать что угодно, т.е. можно вместо перемещаемого блока показать произвольную картинку.

      • Иван

        А если вместо block2 указать какой-нибудь класс, и когда перетаскиваемый элемент будет находиться над элементом этого класса, можно будет узнать над каким элементом идет перенос? Подскажите пожалуйста, Владимир.

        • Вы всегда можете узнать над каким элементом идет перенос, не зависимо от того, установлен какой-нибудь класс или нет.

          Для этого вам даже не обязательно использовать метод droppable (он нужен чтобы обработать «сброс» объекта). Просто используйте событие mouseover.

        • Иван

          Покажите пожалуйста на примере, если не затруднит, думаю пример в одну строчку)

        • Иван

          когда я перетаскиваю один объект через другой — onmouseover не срабатывает, событие срабатывает только когда проводишь мышкой. Можно как-нибудь воткнуть метод в droppable? а именно : что бы этот метод срабатывал не когда отпускаешь кнопку мыши, а когда объект находится над другим, в вашем примере это смена класса css(hoverClass: 'dropHere')

        • Если onmouseover не подходит, можно использовать событие over (это не стандартное событие, оно отслеживается только для droppable блоков). Пример

  • Этот метод мне как пользователю нравится больше. В прошлый раз блоки перетаскивались как-то «неохотно» что-ли. Тут же все гладенько. Блоки захватываются и встают на место без проблем.

    • Визуальные эффекты в HTML5 можно изменить. Вообще, поддержка canvas позволяет рисовать что угодно, т.е. можно вместо перемещаемого блока показать произвольную картинку.

  • Pingback: Простой пример Drag & Drop | Мир CSS()

  • Мне больше понравилось с использованием HTML5 — при перетаскивании видно блок, который пеертаскиваешь. Будем ждать, когда все браузеры будут его поддерживать!

  • Мне больше понравилось с использованием HTML5 — при перетаскивании видно блок, который пеертаскиваешь. Будем ждать, когда все браузеры будут его поддерживать!

  • Егор

    офтоп небольшой:
    нет ли у Вас такого же простого примера treeview на jquery?

  • Егор

    офтоп небольшой:
    нет ли у Вас такого же простого примера treeview на jquery?

  • С HTML 5 намного лучше, и возможности там шире! Жаль, что пройдет еще много ремени, пока большинство браузеров будет его поддерживать!

  • С HTML 5 намного лучше, и возможности там шире! Жаль, что пройдет еще много ремени, пока большинство браузеров будет его поддерживать!

  • Как по мне на старом лучше работает чем на новом ie, да и стоит у меня только 6 версия.

  • Как по мне на старом лучше работает чем на новом ie, да и стоит у меня только 6 версия.

  • Отличный пример, большое спасибо!

  • Отличный пример, большое спасибо!

  • Andrey

    да классно тестирование сделали большое вам спасибо 🙂

  • Guest

    да, в спокойном состоянии googlechrome нагружает процессор около 2%, при пере таскивании 7%, а при перезагрузке этой страницы 11-20%

  • Inner

    додулмались, я уже всю голову сломал чтобы класс textBlock удалить из block2

  • Inner

    Если ком упоможет
    $(function() {    $('.textBlock').draggable({        helper:'clone'    });    $('#block2').droppable({        hoverClass: 'dropHere'        ,drop: function(event, ui) {            $(this).append($(» + ui.draggable.html() + 'X')); $('.textBlock u').click(function() {  $(this).parent().hide(); return false; });        }    });});

  • Иван

    А если вместо TextBlock2 указать какой-нибудь класс, и когда перетаскиваемый элемент будет находиться над элементом этого класса, можно будет узнать над каким элементом идет перенос?

    • Иван

      ой, вместо block2