Drag - лёгкий плагин для перетаскивания элементов
Сегодняшний плагин призван заменить плагин Draggable в тех проектах, где не требуется довольно тяжелый jQuery UI. Плагин с незамыслыватым названием Drag весит всего 400 байт и может выполнять те же действия, что и его старший собрат.Примеры
Простой вызов плагина
$('#ex1').drag();
Функции, срабатывающие при начале и окончании передвижения
$('#ex2').drag({
start:function(elem){
elem.html('Блок удерживается');
}, stop:function(elem){
elem.html('Блок отпущен');
}});
В плагине есть два события - start и stop, которые сраватывают при старте и окончании передвижения соответственно. Через переменную elem можно обращаться к элементу, который передвигается в данный момент. Теперь рассмотрим код плагина с пояснениями:
(function($){
$.fn.drag = function(o){
var o = $.extend({
start:function(){}, // при начале перетаскивания
stop:function(){} // при завершении перетаскивания
}, o);
return $(this).each(function(){
var d = $(this); // получаем текущий элемент
d.mousedown(function(e){ // при удерживании мыши
$(document).unbind('mouseup'); // очищаем событие при отпускании мыши
o.start(d); // выполнение пользовательской функции
d.css('position','absolute');
var f = d.offset(), // находим позицию курсора относительно элемента
x = e.pageX - f.left, // слева
y = e.pageY - f.top; // и сверху
$(document).mousemove(function(a){ // при перемещении мыши
d.css({'top' : a.pageY - y + 'px','left' : a.pageX - x + 'px'}); // двигаем блок
});
return false;
});
$(document).mouseup(function(){ // когда мышь отпущена
$(document).unbind('mousemove'); // убираем событие при перемещении мыши
o.stop(d); // выполнение пользовательской функции
});
});
}
})(jQuery);
Надеюсь, что данный плагин окажется кому-то полезным. Мне он уже помогает в небольших собственных проектах, в которых не нужна вся мощь jQuery UI.
Если будет время, доработаю.
Только хорошо бы пример в отдельном окне.
У меня есть див с панелью инструментов, который надо перемещать по всему окну, что-то он у меня убегает при перемещении вашим плагином
Возможна ли работа плагина в данном случае?
на эти
и установите position в значение fixed.
шапка
что-нибудь
$('#block .head').grag({obj: $('#block')});
$.fn.drag = function(o){
var o = $.extend({
start:function(){}, // при начале перетаскивания
stop:function(){}, // при завершении перетаскивания
obj:$(this)
}, o);
return $(this).each(function(){
var d = $(this); // получаем текущий элемент
c = o.obj;
d.mousedown(function(e){ // при удерживании мыши
c.css('position','absolute');
$(document).unbind('mouseup'); // очищаем событие при отпускании мыши
o.start(c); // выполнение пользовательской функции
var f = c.offset(), // находим позицию курсора относительно элемента
x = e.pageX - f.left, // слева
y = e.pageY - f.top; // и сверху
$(document).mousemove(function(a){ // при перемещении мыши
c.css({'top' : a.pageY - y + 'px','left' : a.pageX - x + 'px'}); // двигаем блок
});
$(document).mouseup(function(){ // когда мышь отпущена
$(document).unbind('mousemove'); // убираем событие при перемещении мыши
o.stop(c); // выполнение пользовательской функции
});
return false;
});
});
}