Ars Longa, Vita Brevis » JavaScript

Автоматическое добавление ссылки на источник при копировании текста с сайта

Vladimir — Sat, 14 Jan 2012 03:42:35 +0000

Навязчивое добавление ссылки на оригинал при копировании текста с сайта

Идея: когда пользователь выделяет часть текста и копирует её в буфер обмена (например, чтобы выложить на своём сайте), автоматически добавлять к выделению ссылку на источник.

Реализация:

var source_link = '

Подробнее: + location.href + '">' + location.href + '

';
jQuery(
function($)
{
if (window.getSelection) $('#content div.post').bind(
'copy',
function()
{
var selection = window.getSelection();
var range = selection.getRangeAt(0);

var magic_div = $('

').css({ overflow : 'hidden', width: '1px', height : '1px', position : 'absolute', top: '-10000px', left : '-10000px' });
magic_div.append(range.cloneContents(), source_link);
$('body').append(magic_div);

var cloned_range = range.cloneRange();
selection.removeAllRanges();

var new_range = document.createRange();
new_range.selectNode(magic_div.get(0));
selection.addRange(new_range);

window.setTimeout(
function()
{
selection.removeAllRanges();
selection.addRange(cloned_range);
magic_div.remove();
}, 0
);
}
);
}
);

Настраиваемые параметры:

source_link — текст, который будет добавляться к копируемому фрагменту. В данном примере задаётся статически, но при желании генерацию ссылки можно усложнить (например, при копировании с текста с домашней страницы можно возвращать ссылку на статью, из которой взята данная цитата). Для этого в строке magic_div.append(range.cloneContents(), source_link); вместо source_link нужно использовать свою функцию, возвращающую HTML для вставки в копируемый фрагмент.
'#content div.post' — выражение, задающее один или более контейнер с текстом, при копировании которого нужно добавлять ссылку на оригинал. Идея в том, что добавлять ссылку на статью при копировании, скажем, части текста одного из комментариев к статье было бы нелогично. С помощью данного выражения можно задать требуемые защищаемые объекты.

Возможные улучшения: проверка длины копируемого текста. Например, если пользователь копирует меньше 20 слов, не добавлять ссылку. Получить выделенный текст можно через range.cloneContents().textContent.

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

Изменение размера поля ввода запроса в PhpMyAdmin

Vladimir — Fri, 23 Jan 2009 14:05:49 +0000

Greasemonkey приходит на помощь

Вещь, которая меня бесит больше всего в PhpMyAdmin — это то, что поле для ввода SQL-запроса очень маленькое (по умолчанию всего 6 строк). К счастью, при помощи Greasemonkey всё очень легко исправляется.

// ==UserScript==
// @name PhpMyAdmin SQL Query textarea height fix
// @namespace http://sjinks.org.ua/
// @include http://my-pma-site.com/* /* указать нужные */
// ==/UserScript==

var e = document.getElementById('sqlquery');
if (e && 'textarea' == e.tagName.toLowerCase()) {
e.style.height = '500px';
}

Создание отражения рисунка с помощью JavaScript

Vladimir — Sun, 16 Nov 2008 22:12:36 +0000

HTML 5 приходит на помощь

Постановка задачи: из исходного изображения

получить отраженное изображение:

Дополнительное условие: генерировать изображение на стороне клиента (то есть без использования GD, ImageMagick и иже с ними).

В черновике стандарта HTML 5 пристутствует такой замечательный элемент как . Если вкратце, то данный элемент предназначен для создания изображений при помощи JavaScript.

Впервые элемент был представлен компанией Apple и использовался как компонент WebKit для Mac OS X в таких приложениях как Dashboard и Safari.

Поддержка в Gecko появилась в версии 1.5, в Presto с версии 9.0 веб-браузера Opera. Текущие версии Internet Explorer (включая восьмую бету) не поддерживают . Несмотря на это, для поставленной задачи существует кросс-браузерное решение.

В Microsoft Internet Explorer отражения с прозрачностью можно достичь путём использования комбинации фильтров. В частности, для вертикального отражения используется фильтр flipv, для горизонтального — fliph. Про реализацию прозрачности в Internet Explorer, наверное, знает каждый: progid:DXImageTransform.Microsoft.Alpha. Тем не менее, не все знают, что можно задавать градиентную прозрачность.

Перейдём к решению. Пусть у нас имеется такая разметка:

Будем полагать, что ширина и высота контейнера заданы (если мы делаем отражение по вертикали, то ширина контейнера совпадает с шириной рисунка, а высота контейнера в два раза больше высоты рисунка; аналогично для горизонтального отражения).

Начнём с классики (MSIE).

/**
* @param container

В случае с IE всё просто и сводится к заданию соответствующих фильтров. С браузерами, поддерживающими HTML 5, всё гораздо сложнее (ad deliberandum: сколько строк занимает программа на C++, если она использует COM-технологию?)

/**
* @param container

* @param image
* @param ratio Коэффициент сжатия/растягивания отражения
* @param opacity_start Начальная (ближняя к отражаемому изображению) непрозрачность
* @param opacity_end Конечная непрозрачность
* @param horizontal 0 = вертикальное отражение, 1 = горизонтальное отражение
*/
function reflect_image(container, image, ratio, opacity_start, opacity_end, horizontal)
{
var reflection = document.createElement('canvas');
var context = reflection.getContext('2d');
reflection.style.height = image.height + 'px';
reflection.style.width = image.width + 'px';
reflection.height = image.height;
reflection.width = image.width;

//Подводный камень: на canvas нельзя рисовать, если она не в DOM-дереве документа
container.appendChild(reflection);

context.save();
var gradient;

if (0 == horizontal) {
// Задаём точку отсчёта, отражаем ось y и создаём вертикальный градиент
context.translate(0, image.height);
context.scale(1, -1);
gradient = context.createLinearGradient(0, 0, 0, image.height);
}
else {
// Задаём точку отсчёта, отражаем ось x и создаём горизонтальный градиент
context.translate(image.width, 0);
context.scale(-1, 1);
gradient = context.createLinearGradient(0, 0, image.width, 0);
}

// Рисуем исходное изображение (оно будет отражено по одной из осей)
context.drawImage(image, 0, 0, image.width, image.height);
context.restore();

// Задаём режим операции
context.globalCompositeOperation = "destination-out";

// Параметры градинтной заливки (в параметрах передаётся НЕпрозрачность, нам нужна прозрачность)
gradient.addColorStop(1, "rgba(255, 255, 255, " + (1 - opacity_end) + ")");
gradient.addColorStop(0, "rgba(255, 255, 255, " + (1 - opacity_start) + ")");
context.fillStyle = gradient;

// Заливаем
if (-1 != navigator.appVersion.indexOf('WebKit')) {
context.fill();
}
else {
context.fillRect(0, 0, image.width, image.height);
}
}

Тестовый пример.

Canvas Tutorial в Mozilla Developer Center

Убиваем рекламу на bash.org.ru, или, Greasemonkey в действии

Vladimir — Thu, 03 Jul 2008 00:41:00 +0000

Убираем тупую рекламу с bash.org.ru при помощи GreaseMonkey

Многие (если не все) знакомы с ресурсом bash.org.ru. И, хотя юмор там в последнее время очень тупой, старые шутки почитать временами можно. Помимо тупого юмора лично меня на bash.org.ru больше всего раздражает не менее тупая реклама И если со всякими iframe и иже с ним AdBlock может бороться, то со вставками вида

Дэвид Блэйн раскукожил Firefox! Теперь в нём Яндекс!

он уже не справляется (так как они вставляются в вывод на сервере). Достал меня Дэвид Блейн. И Яндекс меня достал. И еще много что меня достало. Наверное, надо отдохнуть. Но речь не об этом. В общем, если меня что-то раздражает, я от этого избавляюсь (если читать, то с комфортом). Задачка как раз для Greasemonkey.

Ранее я уже приводил пример пользовательского скрипта для извлечения ASIN с amazon.com. Здесь используется нечто похожее.

Идея состоит в том, что для нормальных цитат после <hr class="iq"> сразу идет <script type="text/javascript" language="JavaScript"> и только потом <div class="q">, а в случае с рекламой <script> отсутствует; всё показано на рисунке:

Переходим к коду.

// ==UserScript==
// @name Bash.org.ru Ads Remover
// @namespace http://sjinks.org.ua/
// @include http://bash.org.ru/*
// @exclude http://bash.org.ru/abysstop
// @exclude http://bash.org.ru/abyssbest
// ==/UserScript==

var x = document.evaluate(
'//div[@id="quotes"]/hr[@class="iq"]/following-sibling::*[position()=1][@class="q"]',
document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null
);

for (var i=0; i<x.snapshotLength; ++i) {
var a = x.snapshotItem(i);
while (1) {
var b = a.nextSibling;
a = a.parentNode.removeChild(a);
if (b.tagName && 'div' == b.tagName.toLowerCase()) {
a = b;
}
else {
break;
}
}
}

x = document.evaluate('//iframe', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (i=0; i<x.snapshotLength; ++i) {
a = x.snapshotItem(i);
a.parentNode.removeChild(a);
}

Устанавливаем, активируем и не смотрим на рекламу. Всё-таки XPath — это вещь!

Парочка аккордеонов

Vladimir — Sun, 13 Apr 2008 18:19:53 +0000

Несколько вариантов реализации меню-аккордеона с использованием библиотеки Prototype

Недавно в одном из проектов появилась необходимость использовать аккордеон (подобный используемому на Desert Ridge Marketplace). Любят заказчики дешевые эффекты, ничего здесь не поделаешь

Чем мне не понравился аккордеон на Desert Ridge — это полной зависимостью от JavaScript: если JavaScript выключен, навигация по сайту переставала работать. Это мне не понравилось, и я решил написать свой.

Представляю два решения:

Подменю сворачивается/разворачивается по щелчку, элементы меню не зависят друг от друга;
Подменю сворачивается/разворачивается по щелчку, при этом не может быть более одного развёрнутого подменю.

При выключенном JavaScript оба аккордеона трансформируются в двухуровневый список.

Поехали. Будем использовать следующую разметку:

<ul id="accordion">
<li>
<a href="#">Item 1</a>
<ul>
<li><a href="#">SubItem 1.1</a></li>
<li><a href="#">SubItem 1.2</a></li>
<li><a href="#">SubItem 1.3</a></li>
<li><a href="#">SubItem 1.4</a></li>
</ul>
</li>

<li class="active">
<a href="#">Item 2</a>
<ul>
<li><a href="#">SubItem 2.1</a></li>
<li><a href="#">SubItem 2.2</a></li>
<li><a href="#">SubItem 2.3</a></li>
<li><a href="#">SubItem 2.4</a></li>
</ul>
</li>

<li>
<a href="#">Item 3</a>
<ul>
<li><a href="#">SubItem 3.1</a></li>
<li><a href="#">SubItem 3.2</a></li>
</ul>
</li>

<li>
<a href="#">Item 4</a>
<ul>
<li><a href="#">SubItem 4.1</a></li>
<li><a href="#">SubItem 4.2</a></li>
</ul>
</li>
</ul>

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

Оформим аккордеон при помощи CSS:

a { text-decoration: none; color: #00F; }
a:hover { text-decoration: underline; }
#accordion a { outline: 0; }

#accordion, #accordion ul, #accordion li {
list-style: none;
margin: 0;
padding: 0;
display: block;
}

#accordion {
border: 1px solid #CCC;
width: 150px;
}

#accordion ul {
margin-left: 40px;
}

#accordion > li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

#accordion > li:last-child {
border-bottom: 0;
}

#accordion li.active > a {
color: red;
}

Покажем уродство IE6, не понимающего CSS 2.1:

* html #accordion li {
border-bottom: 1px solid #CCC;
padding: 2px 5px;
}

* html #accordion li li {
border-bottom: 0;
padding: 0;
}

* html #accordion {
border-bottom: 0;
}

* html #accordion li.active a {
color: red;
}

* html #accordion li.active ul a {
color: blue;
}

За использование пяти лишних правил я и не люблю IE6 (и это мы еще используем простую разметку).

Переходим к JavaScript. В данных примерах я использую библиотеки Prototype и Scriptaculous Effects (всё очень легко переводится на jQuery).
Вариант 1: независимые элементы меню

$$('#accordion > li:not([class="active"]) ul').invoke('setStyle', { display : 'none' }).invoke('addClassName', 'collapsed');
$$('#accordion > li[class="active"] ul').invoke('addClassName', 'expanded');
$$('#accordion > li > a').invoke('observe', 'click',
function(e)
{
e.stop();
var ul = e.findElement('a').up('li').down('ul');
if (ul) {
new Effect.toggle(ul.toggleClassName('collapsed').toggleClassName('expanded'), 'blind');
}
}
);

Рабочий пример для первого варианта.

Вариант 2: развёрнуто не более одного меню

$$('#accordion > li:not([class="active"]) ul').invoke('setStyle', { display : 'none' }).invoke('addClassName', 'collapsed');
$$('#accordion > li[class="active"] ul').invoke('addClassName', 'expanded');
$$('#accordion > li > a').invoke('observe', 'click',
function(e)
{
e.stop();
var ul = e.findElement('a').up('li').down('ul');
if (ul) {
if (ul.hasClassName('collapsed')) {
var c = $$('#accordion ul:not([class="collapsed"])')[0];
if (c) {
new Effect.BlindUp(c.toggleClassName('collapsed').toggleClassName('expanded'));
}
}
new Effect.BlindDown(ul.toggleClassName('collapsed').toggleClassName('expanded'));
}
}
);

Рабочий пример для второго варианта.

Всё очень просто!

Скрипт для Greasemonkey для извлечения ASIN с amazon.com

Vladimir — Mon, 07 Apr 2008 21:57:26 +0000

Работу можно получить, даже если часовая ставка в 4 раза превышает ту, что хочет заказчик

Сегодня (вернее, уже вчера) мне попался заказчик, которому нужен был скрипт для Greasemonkey, который бы мог вытаскивать ASIN из URL'ов на amazon.com и отображать их.

Задачка довольно простая, но подобный тип задач встречается довольно часто. Поэтому привожу готовое решение.

// ==UserScript==
// @name Amazon ASIN Extractor
// @namespace http://sjinks.org.ua/
// @include http://www.amazon.com/*
// @include http://amazon.com/*
// ==/UserScript==

var links = document.evaluate(
'(//div[contains(@id, "title_")]/a[contains(@href, "/dp/")])|(//strong[@class="sans"]/a[contains(@href, "/dp/")])|(//td[@class="dataColumn"]//td/a[contains(@href, "/dp/")])',
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null
);

for (var i=0; i<links.snapshotLength; ++i) {
var a = links.snapshotItem(i);
var href = a.getAttribute('href');
var t = href.match(/\/dp\/([A-Z0-9]{10})\//);
if ('undefined' != typeof t[1] && 10 == t[1].length) {
var div = document.createElement('div');
var strong = document.createElement('strong');
strong.appendChild(document.createTextNode('ASIN: '));
div.appendChild(strong);
div.appendChild(document.createTextNode(t[1]));
a.parentNode.insertBefore(div, a.nextSibling);
}
}

Для модификации для другого сайта просто меняется XPath внутри document.evaluate(), @include, регулярное выражение в href.match() и проверка в if.

Verbum sapienti sat est…

IE6/7: слишком широкие кнопки

Vladimir — Sun, 16 Mar 2008 08:57:51 +0000

Как исправить глюк IE6/7, связанный с расползанием кнопки с длинным текстом

Читая один замечательный блог, я наткнулся на заметку о том, что в IE6/7 кнопки c "длинным текстом" становятся очень длинными.

Я не удержался и проверил: действительно. Причем только в IE6 и IE7, в IE8 (на удивление) всё в порядке.

Тестовая разметка (взята из исходной статьи):

Результат (IE7):

В IE6 аналогично.

Первым делом я стал грешить на стили по умолчанию (например, padding, заданный в процентах от ширины). Поэтому решил проверить очень простым скриптом:

var b = document.getElementById('test');
var s = (b.currentStyle) ? b.currentStyle : b.ownerDocument.defaultView.getComputedStyle(b, '');
for (var prop in s) {
document.write('' + prop + ': ' + s[prop] + '
');
}

Увы… Зато, кому интересно, получились такие дефолтные стили в разных браузерах:

	FF2	IE6	IE7	IE8	Opera 9	Safari 3
background	rgb(212, 208, 200)	rgb(212, 208, 200)	rgb(212, 208, 200)	rgb(212, 208, 200)	transparent (???)	rgb(192, 192, 192)
border	2px outset rgb(212, 208, 200)	2px outset rgb(0, 0, 0)	2px outset rgb(0, 0, 0)	3px outset rgb(0, 0, 0)	2 both transparent (???)	0 none rgb(0, 0, 0)
display	inline	inline	inline	inline-block	inline	inline-block
font	normal normal 400 13.3333px/normal "MS Shell Dlg"	normal normal 400 10pt/normal "MS Shell Dlg"	normal normal 400 10pt/normal "MS Shell Dlg"	normal normal 400 10pt/normal Arial	normal normal normal relative/normal Arial	normal normal normal 11px/normal "Lucida Grande"
height	18px	auto	auto	auto	auto	18px
margin	0	auto	auto	auto	0	2px
overflow	visible	hidden	hidden	hidden	visible	visible
padding	0 6px	0	0	1px 8px	1px 8px	0 8px

Видим, что у всех браузеров, кроме IE, overflow установлено в visible. Хотя overflow не должно играть здесь никакой роли, интересно проверить, как IE себя поведёт при дефолтных стилях FireFox. Меняем разметку:

Сработало! Вот они, чудеса:

Я не берусь объяснять, почему такое вот исправление сработало. Как говорил классик,

Why is this happening? Don't ask such silly questions! This is IE, remember? Conformance with the specs is only to be hoped for, not expected. The simple fact is it does happen.

ProtoBox: LightBox 2 reloaded :-)

Vladimir — Mon, 10 Mar 2008 01:28:28 +0000

Новая версия известного LightBox 2 с большими возможностями

Я думаю, что многие видели LightBox 2 в действии. Но вот парадокс: заказчикам/пользователям он нравится (ох уж эти дешевые эффекты ), а вот многие программисты терпеть его не могут. Мне пришлось несколько раз столкнуться с LightBox (просто интегрировать его в приложение, написанное индусами). Но один раз мне понадобилось модифицировать кое-какое поведение скрипта, и я залез внутрь…
Из того, что мне ужасно не понравилось: LightBox использует библиотеку Prototype, но написан совершенно не в ее стиле — больше напоминает хаотичный набор функций. Вторая неприятная особенность — повторное изобретение велосипеда: многие функции, существующие в Prototype, зачем-то были написаны заново. Я, конечно, понимаю, что в предыдущих версиях Prototype таких функций, возможно, не было, но ведь прогресс не стоит на месте. Разметка, которую генерирует LightBox, тоже очень несовершенна — видимо, Lokesh Dhakar не очень дружит с CSS. Но самое неприятное: использование обработчиков событий из DOM0 (например, element.onclick = function() { }). Интересно, для чего Prototype реализует Event.observe()/Event.stopObserving()? Ведь использование методов DOM2 для работы с событиями более удобно (и в плане расширяемости скрипта)!

Есть и мелкие баги: известно, что в Internet Explorer 6 не очень просто перекрыть <select> каким-нибудь HTML-элементом (по умолчанию <select> все равно будет сверху). Для этого в LightBox реализованы функции hideSelectBoxes()/showSelectBoxes() (и аналогичные для элементов <object> и ). Казалось бы, все хорошо, но… проблемы появились, когда на странице присутствовали элементы <select> с visibility: hidden. LightBox их открыл. Аналогично со скрытыми элементами <object>.

Казалось бы, что это всё мелочи… Согласен, но когда таких мелочей очень много, и для добавления простой функциональности приходится переписывать большие куски кода, это очень раздражает. Пришлось переписать

Из новой функциональности:

возможность перетаскивания окна с картинкой (из разряда «дешевые эффекты»; для этого требуется наличие dragdrop.js из Scriptaculous);
возможность просмотра изображений по кольцу (после последнего изображения идёт первое);
возможность использования существующего оверлея (тот самый затемнённый экран);
возможность задания максимальной высоты и ширины изображения (пока в пикселях);
возможность защиты изображения путём наложения прозрачного GIF’а сверху (ну очень уж заказчик настаивал);
сокрытие <object>/ стало опциональным;
добавлена возможность полного отключения анимации (чтобы избежать зависимости от scriptaculous; тщательно не тестировалось).

Улучшения по сравнению с оригиналом:

упрощена разметка;
код полностью переписан;
вместо ID используются классы;
отпала необходимость скрывать <select> для IE6.

Еще одно достоинство — код полностью совместим с оригинальным LightBox 2.

Пример использования:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Usage Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<link href="protobox.css" rel="stylesheet" type="text/css" />
<script src="prototype.js" type="text/javascript"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="builder.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
<script type="text/javascript" src="odl.js"></script>
<script type="text/javascript" src="protobox.js"></script>

<style type="text/css">/*[CDATA[*/
html, body { margin: 0; padding: 0; border: 0}
a img { border: 0 }
/*]]>*/
</style>
</head>
<body>
<a href="photos/photo1.jpg" rel="lightbox"><img src="photos/thumb1.jpg" alt="" /></a>
<a href="photos/photo2.jpg" rel="lightbox"><img src="photos/thumb2.jpg" alt="" /></a>
<a href="photos/fphoto1.jpg" rel="lightbox[gallery]" title="Image 1"><img src="photos/fthumb1.jpg" alt="" /></a>
<a href="photos/fphoto2.jpg" rel="lightbox[gallery]" title="Image 2"><img src="photos/fthumb2.jpg" alt="" /></a>

<script type="text/javascript">//[CDATA[
function onDomLoaded()
{
initLightbox(
{
ring : true,
protect : true
}
);
}

odl.register(onDomLoaded);
//]]>
</script>
</body>
</html>

Скачать ProtoBox.

IE6, Sortable и whatever:hover

Vladimir — Wed, 16 Jan 2008 04:20:42 +0000

Как подружить whatever:hover и Scriptaculous

Работая над одним сайтом, столкнулся с одной проблемой: в IE6 при использовании whatever:hover для выпадающего меню, построенного чисто на CSS, и Scriptaculous (а именно, Sortable, причем для элемента, не имеющего никакого отношения к меню) возникало непонятное мерцание.

Страница, на которой проявляется мерцание (только IE6).
То, что «виноват» именно Scriptaculous, доказывается очень легко: в исходном тексте test.html комментируется строка, создающая Draggable:

var user_id = 5060;
var id = 'user_' + user_id;

if ($(id)) {
Sortable.create(
$(id),
{
}
);
}

Результат можно увидеть здесь — мерцание исчезло.

Путём долгих и нудных экспериментов были найдены строки, вызывающие такое поведение:

Таким образом, если мы уберём Event.observe(document, "mousemove", this.eventMouseMove), то мерцание исчезнет. Естественно, это не выход, так как весь код, который прямо или косвенно использует Draggables, перестанет работать.

Попытаемся решить проблему (лезть в чужой код ой как не хочется). Одно ясно: вызов Event.observe(document, "mousemove", this.eventMouseMove) придется закомментировать. Добавлять обработчик события придется при активации draggable (в функции Draggables.activate()), а убирать — в Draggables.deactivate() и Draggables.endDrag(). Возможно, хватит просто endDrag(), но ничего плохого не случится, если для подстраховки изменим оба метода.

Исходный код:

register: function(draggable) {
if(this.drags.length == 0) {
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
this.eventKeypress = this.keyPress.bindAsEventListener(this);

Event.observe(document, "mouseup", this.eventMouseUp);
Event.observe(document, "mousemove", this.eventMouseMove); //<-- нужно закомментировать
Event.observe(document, "keypress", this.eventKeypress);
}
this.drags.push(draggable);
},

activate: function(draggable) {
if(draggable.options.delay) {
this._timeout = setTimeout(function() {
Draggables._timeout = null;
window.focus(); //<-- здесь нужно повесить обработчик события
Draggables.activeDraggable = draggable;
}.bind(this), draggable.options.delay);
} else {
window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
//<-- здесь нужно повесить обработчик события
this.activeDraggable = draggable;
}
},

deactivate: function() {
this.activeDraggable = null; //<-- здесь нужно убрать обработчик события
},

endDrag: function(event) {
if(this._timeout) {
clearTimeout(this._timeout);
this._timeout = null;
}
if(!this.activeDraggable) return;
this._lastPointer = null;
this.activeDraggable.endDrag(event);
this.activeDraggable = null; //<-- здесь нужно убрать обработчик события
},

Окончательный результат:

register: function(draggable) {
if(this.drags.length == 0) {
this.eventMouseUp = this.endDrag.bindAsEventListener(this);
this.eventMouseMove = this.updateDrag.bindAsEventListener(this);
this.eventKeypress = this.keyPress.bindAsEventListener(this);

Event.observe(document, "mouseup", this.eventMouseUp);
Event.observe(document, "keypress", this.eventKeypress);
}
this.drags.push(draggable);
},

activate: function(draggable) {
if(draggable.options.delay) {
this._timeout = setTimeout(function() {
Draggables._timeout = null;
window.focus();
Event.observe(document, "mousemove", this.eventMouseMove);
Draggables.activeDraggable = draggable;
}.bind(this), draggable.options.delay);
} else {
window.focus(); // allows keypress events if window isn't currently focused, fails for Safari
if (draggable) {
Event.observe(document, "mousemove", this.eventMouseMove);
}
this.activeDraggable = draggable;
}
},

deactivate: function() {
this.activeDraggable = null;
Event.stopObserving(document, "mousemove", this.eventMouseMove);
},

endDrag: function(event) {
if(this._timeout) {
clearTimeout(this._timeout);
this._timeout = null;
}
if(!this.activeDraggable) return;
this._lastPointer = null;
this.activeDraggable.endDrag(event);
this.activeDraggable = null;
Event.stopObserving(document, "mousemove", this.eventMouseMove);
},

Всё работает!
Патч в формате unified diff.