Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   скрипт для перетаскивания объектов (https://javascript.ru/forum/misc/7014-skript-dlya-peretaskivaniya-obektov.html)

bushstas 11.01.2010 02:46

скрипт для перетаскивания объектов
 
все-таки я допер как написать скрипт чтобы можно было перетаскивать объекты (я перетаскивал <div>) и в опере и в мозилле, а IE то вроде понимает onDrag (или что-то типа того), работает прекрасно только вот блин одно плохо одновременно с перетаскиванием происходит выделение текста если таковой попадается под курсор. хотя я не понимаю почему ведь текст то в слое который под перетаскиваемым, это в моей опере, а мозилла нормально, текст не выделяется. Еще один минус если объект маленький а скорость перетаскивания высока то объект просто вываливается из фокуса :) чем меньше объект тем медленнее его надо перетаскивать :)

может кому пригодится
<div id="some_object" style="position:absolute;"  onmousedown="start_dragging(event)" onmousemove="dragging(event)" onmouseup="stop_dragging()"></div>

// на событие mouseDown

function start_dragging(event){
drag=1;                      // говорит что перетаскивание началось
x2=event.clientX;        //запоминаем начальное X курсора 
y2=event.clientY;        //запоминаем начальное Y курсора 

// далее сбрасываем marginы объекта если таковые есть
// иначе объект сместится в сторону если его left или top были заданы
// в процентах и были заданы marginы скажем например для его 
//оцентровки

var position_x =center_window.offsetLeft; 
var position_y =center_window.offsetTop; 

document.getElementById('some_object').style.marginLeft="0px";
document.getElementById('some_object').style.marginRight="0px";
document.getElementById('some_object').style.left=position_x;

document.getElementById('some_object').style.marginTop="0px";
document.getElementById('some_object').style.marginBottom="0px";
document.getElementById('some_object').style.top=position_y;
}

function dragging(event){
// проверяем началось ли перетаскивание
if (drag==1){

x1=event.clientX;    // определяем текущую позицию курсора по Х
y1=event.clientY;    // определяем текущую позицию курсора по Y

shift_x=x1-x2                 // вычисляем разницу (сдвиг) между текущими и 
shift_y=y1-y2                // предыд. позициями курсора 

// сдвигаем объект
document.getElementById('some_object').style.left=some_object.offsetLeft+shift_x
document.getElementById('some_object').style.top=some_object.offsetTop+shift_y

x2=x1; y2=y1; // запоминаем предыдущие координаты курсора
}
}	

// на событие mouseUp то есть когда закончили перетаскивать и 
// отпустили кнопку

function stop_dragging(){drag=0;}


ну вот хотел сделать чтобы на событие mouseDown курсор менялся на "move" но не работает меняется только при следующем событие mouseover

код небольшой для чего-то невеликого сгодится :)
может у кого есть скрипт покрасивее? я только учусь


Часовой пояс GMT +3, время: 21:51.