| |
|
|
| | Здравствуйте.
Привожу код который позволяет таскать елементы по странице
<html>
<head>
<!-- Приведенный ниже код заключается между тегами <head>...</head> -->
<script language="JavaScript">
// Объявим глобальные переменные
// Переменная состояния, по умолчанию ничего не двигается = false
var moveState = false;
// Переменные координат мыши в начале перемещения, пока неизвестны
var x0, y0;
// Начальные координаты элемента, пока неизвестны
var divX0, divY0;
// Объявим функцию для определения координат мыши
function defPosition(event) {
var x = y = 0;
if (document.attachEvent != null) { // Internet Explorer & Opera
x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
if (!document.attachEvent && document.addEventListener) { // Gecko
x = event.clientX + window.scrollX;
y = event.clientY + window.scrollY;
}
return {x:x, y:y};
}
// Функция инициализации движения
// Записываем всё параметры начального состояния
function initMove(div, event) {
var event = event || window.event;
x0 = defPosition(event).x;
y0 = defPosition(event).y;
divX0 = div.style.left ? parseInt(div.style.left) : x0;
divY0 = div.style.top ? parseInt(div.style.top) : y0;
moveState = true;
//document.write("x0=" + x0 + ", y0=" +y0 );
}
// Если клавишу мыши отпустили вне элемента движение должно прекратиться
document.onmouseup = function() {
moveState = false;
}
// И последнее
// Функция обработки движения:
function moveHandler(div, event) {
var event = event || window.event;
if (moveState) {
div.style.position='absolute';
div.style.left = divX0 + defPosition(event).x - x0;
div.style.top = divY0 + defPosition(event).y - y0;
}
}
</script>
</head>
<body>
<html>
<div style='' \
onmousedown = 'initMove(this, event);' \
onmouseup = 'moveState = false;' \
onmousemove = 'moveHandler(this, event);' \
>
<div class="squarebox"><div class="squareboxgradientcaption" style="height:23px; cursor: pointer;" onClick="">
<div style="float: left" id=test><span class="style4">Vehicles</span></div>
<div style="float: right"><img src="img/arrow_down.gif" width="10" height="10" border="0" alt="Show/Hide" title="Show/Hide" /></div></div>
</div>
</div>
</body>
</html>
|
В нем есть 2 проблемы. Первая, скрипт работает не достаточно быстро. Когда мышкой водить слишком быстро, слой не успевает за мышкой. Второе, при первом нажатии и перетаскивании слой пригает относительно того положения, при котором его дернули, но уже второй раз он нормально, без прыжков начинает двигаться. Помогите решить эту проблему. Спасибо. | |
| |
|
|
| |
|
|
| |
для: Саша
(17.02.2009 в 19:58)
| | | я бы посоветовал вам пользоваться jQuery. Изобретать велосипеды нынче не в моде
http://www.linkexchanger.su/2008/18.html как раз про технологию drag and drop | |
| |
|
|
| |
|
|
| |
для: Саша
(17.02.2009 в 19:58)
| | | что бы решить эти 2 проблемы наверное надо писать разработчикам браузеров, а не на форум программистов :)
И не надо использовать сторонние библиотеки по типу jQuery или Prototype (слишком много лишнего кода придется с собой таскать, что не есть признаком высокого уровня мастерства), как вариант можно исходный код рассмотреть для общего образования.
По-поводу моды на изобретение велосипедов — обязательно изобретай, так как надо подымать свой уровень, что без «велосипедов» будет очень тяжело. А хороший спец, который без всяких библиотек умеет ваять и в кризис оплачивается прилично. | |
| |
|
|
| |
|
|
| |
для: Lelik
(17.02.2009 в 22:20)
| | | Спасибо помогли конечно Ж-) | |
| |
|
|
| |
|
|
| |
для: Саша
(17.02.2009 в 23:55)
| | | Прыгают когда в первый раз устанавливается диву position: absolute;
Все элементы перестают его учитывать и возможно опускаются вниз. | |
| |
|
|
| |
|
|
| |
для: Lelik
(17.02.2009 в 22:20)
| | | нынче, в эпоху мегабитных каналов и гигагерцовых процессоров
>слишком много лишнего кода придется с собой таскать
думаете оно на что-то повлияет?
что лучше: я буду делать скрипт с кучей гемороя и мозгоёбства, проверяя на работоспособность в десятке браузеров, и под каждый баг браузера писать заглушку
или я потрачу свое время на простой и красивый синтаксис jQuery, где даже не надо делать разницу в коде между IE и FF, при этом время написания скрипта уменьшится более чем в 2 раза
для примера посмотрите, сколько кода нужно для реализации красивого плавного Drag-and-drop по моей ссылке выше | |
| |
|
|
| |
|
|
| |
для: вялый
(18.02.2009 в 00:20)
| | | Дорогой мой друг, вот когда ты придешь работать в организацию или у тебя будет такой сайт, где каждый килобайт на вес золота, ты всё поймешь :) | |
| |
|
|
| |
|
|
| |
для: Lelik
(18.02.2009 в 10:18)
| | | ммм а можно примеры таких сайтов? :) | |
| |
|
|
| |
|
|
| |
для: вялый
(18.02.2009 в 13:42)
| | | яднекс, яху, рамблер, гугл... список думаю ты сам сможешь продолжить :) | |
| |
|
|
| |
|
|
| |
для: Lelik
(18.02.2009 в 13:54)
| | | нууу до скриптописателя яндекса мне как до марса раком :) | |
| |
|
|
| |
|
|
| |
для: вялый
(18.02.2009 в 22:05)
| | | зато есть к чему стремиться :) | |
| |
|
|
| |
|
|
| |
для: Саша
(17.02.2009 в 19:58)
| | | Принцип перетаскивания у вас левый какой-то использован.
Посмотрите мой код (23.05.2008 в 03:17) в теме http://www.softtime.ru/forum/read.php?id_forum=4&id_theme=53491 - там всё "таскается" без проблем - быстро и без дёрганий и прыжков. | |
| |
|
|
