скрол мышкой картинки внутри слоя
Нужно сделать возможность перетаскивания картинки внутри слоя с фиксированной высотой и шириной, картинка больше размеров слоя
Перетаскивание картинки должно начинаться при нажатие на картинку и заканчиваться после отпускания мыши Первая проблема с которой я столкнулся в FF при нажатие на картинку начинается перетаскивание картинки средствами браузера, и событие onclick не срабатывает, как с этим справиться? И если ли готовые средства реализации требуемой функции, желательно на jquery |
Зачем Вам onclick для перетаскивания изображения? Тут нужен onmousedown.
|
|
Спасибо, но немного не подходит
А нет ли способа запретить перетаскивание элементов браузером? С остальным разобрался, вся проблема только в не срабатывание событий onmousedown и onmouseup |
Если, что-то не получается приведите код, здесь нет телепатов
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(function()
{
$('#pdfPage').mousedown(function(){
$('#pdfPage').css("cursor","-moz-grabbing")
})
$('#pdfPage').mouseup(function(){
$('#pdfPage').css("cursor","-moz-grab")
})
})
</script>
</head>
<body>
<div class="right_col" style="cursor: -moz-grab;">
<img id="pdfPage" src="http://img4-fotki.yandex.net/getx/10000/photoface.250/vladimi-kryukov_254428_L" />
</div>
</body>
</html>
Проблема в том что в firefox 3.6.8 mousedown обрабатывается нормально, если же сразу после нажатия, не двигая мышку отпустить кнопку, mouseup тоже срабатывает, если же не отпуская кнопку мышь передвинуть, хватается фрагмент картинки, и после отпускания кнопки событие mouseup не срабатывает Решение было бы какая то возможность обработать событие mouseup после отпускания кнопки в момент перетаскивания картинки |
Что по вашему должен выполнять ваш бредовый код? Менять курсор мыши в FireFox? ;)
<script type="text/javascript">
window.onload = function(){
var elemX=0, elemY=0, drag=0, dragy = document.getElementById('some_id');
dragy.style.cssText = "cursor:move; position:absolute; left:100px; top:100px";
dragy.onmousedown = function(event){
event = event || window.event;
elemX = event.clientX+document.body.scrollLeft-parseInt(dragy.style.left);
elemY = event.clientY+document.body.scrollTop-parseInt(dragy.style.top);
drag = true;
};
dragy.ondragstart = function() {
return false;
};
document.onmouseup = function() {
drag = false;
};
document.onmousemove = function(event) {
event = event || window.event;
if(drag){
dragy.style.left=event.clientX+document.body.scrollLeft-elemX;
dragy.style.top=event.clientY+document.body.scrollTop-elemY;
}
};
};
</script>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" id="some_id" alt="" />
Еслу нужно на jQuery есть jquery.event.drag PS: Учитесь пользоваться поиском и не отнимайте время у других! |
Мой бредовый код должен был именно менять курсор, специально выкинул из кода все лишнее чтобы проиллюстрировать проблему, которую не мог решить (с событием mouseup)
Спасибо за помощь, вроде бы разобрался |
| Часовой пояс GMT +3, время: 20:05. |