| |
|
|
| | Занялся я эмуляцией линейки-разделителя, которая перемещается по горизонтали и изменяет размеры смежных элементов. В связи с чем, имею серьезный вопрос.
Как поймать и обработать событие отпускания кнопки? Или я вообще неверно обрабатываю событие нажатия?
И второе. Как запретить выделение постороннего текста при движении мыши с нажатой кнопкой при перемещении сплиттера?
Вот, собственно:
<html>
<head>
<title></title>
<script >
function defPosition(event) {
var x = y = 0;
if (document.attachEvent != null) { // Internet Explorer & Opera
x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
} else if (!document.attachEvent && document.addEventListener) { // Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
} else {
// Do nothing
}
return {x:x, y:y};
}
function Moveme()
{
document.onmousemove = function(event) { // ловим движение
var event = event || window.event;
document.getElementById('splitter').style.left = defPosition(event).x + 'px';
document.getElementById('lefter').style.width = defPosition(event).x - 15 + 'px';
}
}
</script>
<style>
#splitter{
width:4px;
position:absolute;
display:block;
cursor:e-resize;
left:255px;
height:100%;
}
#righter, #lefter{
width:240px;
height:300px;
float:left;
display:block;
border:1px solid green;
}
#righter{
border:1px solid red;
position:relative;
left:15px;
}
</style>
</head>
<body>
Тут какой-то текст
<div id=lefter>qwertyuiop1</div>
<div id=splitter onMouseDown="Moveme()" style="height: 300px; width:4px; background-color: red"></div>
<div id=righter>qwertyuiop2</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(12.10.2009 в 16:23)
| | | Подход у вас принципиально неверен.
На див-сплиттер надо "навешивать" две функции на два события:
а) по mousedown функция, отлавливающая движение мыши и делающая то,
что вам надо делать, должна подключаться;
б) по mouseup эта же функция должна отключаться.
Поэтому подключение функции должно быть осуществлено ОБРАТИМЫМИ методами.
Т.е. не document.onmousemove = function (), как это сделано у вас, а методами
attachEvent (и addEventListener), чтобы можно было их отключить
методами detachEvent (и removeEventListener).
Самый надёжный способ "победить" выделение текста во всех браузерах - закрыть "сверху"
всю область, где будет перемещаться мышь, пустым дивом с непрозрачным фоном,
но с абсолютной прозрачностью (с использованием opacity). | |
| |
|
|
| |
|
|
| |
для: АЯ
(12.10.2009 в 19:05)
| | | Как ими пользоваться? Я уже весь вечер убил, кушать не могу!
document.getElementById('splitter').addEventListener("onmousemove", Moveit(), false);
|
Так, вроде? а в defPosition тогда какой ивент отдавать, чтобы координаты снять? | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(12.10.2009 в 21:47)
| | |
<script>
var t = 'mouse', m = t + 'move', M = 'on' + m, u = t + 'up', U = 'on' + u, b = false, d = document;
function fWrk (e)
{
var E = window.event || e, L = E.pageX || (E.clientX + d.body.scrollLeft);
d.getElementById ('splitter').style.left = L + 'px';
}
function fAdd ()
{
if (d.addEventListener) {d.addEventListener (m, fWrk, b); d.addEventListener (u, fDel, b)}
else if (d.attachEvent) {d.attachEvent (M, fWrk, b); d.attachEvent (U, fDel, b)}
}
function fDel ()
{
if (d.addEventListener) {d.removeEventListener (m, fWrk, b); d.removeEventListener (u, fDel, b)}
else if (d.attachEvent) {d.detachEvent (M, fWrk, b); d.detachEvent (U, fDel, b)}
}
</script>
<style>
#splitter {height: 300px; width: 4px; background-color: red; position: absolute; left: 255px; cursor: e-resize}
</style>
<div id="splitter" onmousedown="fAdd ()"></div>
|
| |
| |
|
|
| |
|
|
| |
для: АЯ
(13.10.2009 в 00:41)
| | | Это уже прогресс! Спасибо! )) В ишаке стало работать.
Однако, в ФФ при некоторых нажатиях этот div переходит в режим перетаскивания (такой полупрозрачненький становится), и на этом месте mouseup не регистрируется до следующего клика.
Я заставлял старый вариант работать в ФФ, через те же процедуры, что приводил выше, добавив лишь
function Horosh(){
document.onmousemove = function(event) {
var event = "";
window.event = "";
}
}
|
ну и обработку этой функцией события onMouseUp. Оно в ФФ точно так же получалось. Правда, ишак был в отказе, работал по-старому.
А. наверное, выделение виновато...
Все равно дичайше благодарю! Спать буду существенно спокойнее. | |
| |
|
|
| |
|
|
| |
для: DJ Paltus
(13.10.2009 в 01:12)
| | | >"наверное, выделение виновато..."
Поделитесь найденным средством. | |
| |
|
|
| |
|
|
| |
для: АЯ
(13.10.2009 в 02:00)
| | | Вот, в одном блоге нашел и привинтил к функции fWrk. | |
| |
|
|
| |
|
|
| |
для: АЯ
(13.10.2009 в 00:41)
| | | Еще раз мегаспасибо!
Победить выделение, из-за которого подвисало всё, удалось "простенькой функцией", найденной гуглем, теперь и в ФФ работает как надо. | |
| |
|
|
