С помощью метода draggable мы делаем все элементы с классом textBlock перемещаемым. Параметр helper:’clone’ указывает, что сам элемент должен оставаться на месте, а перемещаться будет его копия. Чтобы сделать block2 «приёмником» перемещаемых элементов используется метод droppable. В параметре hoverClass указываем имя CSS класса, который будет присваиваться блоку, когда над ним находится перемещаемый элемент. В параметре drop указываем обработчик события drop. Так же, как и в прошлый раз, здесь мы просто создаём новый элемент внутри контейнера block2.
.jpg)
Получить доступ к перетаскиваемому элементу можно с помощью объекта ui. draggable, который передаётся во втором параметре обработчика. Как видите, код получился даже короче чем в прошлый раз. И, кроме того, он работает во всех браузерах, поддерживаемых библиотекой jQuery. Более того, в jQuery UI входят компоненты вроде Sortable, которые значительно расширят её возможности. Но у HTML5 есть два важных преимущества. 1) Потребление ресурсов. Попробуйте просто подвигать любой из блоков мышкой и одновременно посмотрите нагрузку на процессор. Думаю, результат будет виден невооружённым взглядом. 2) Поддержка браузером HTML5 означает, что вы сможете перетаскивать элементы как из другого окна, так и из другого приложения, а в случае с jQuery UI это невозможно. Наверное, отличным решением была бы JS библиотека, подобная jQuery UI, но написанная с использованием возможностей HTML5… Хотя, без поддержки нового стандарта браузерах пользы от неё будет немного. Удачи!