Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как мышкой перемещать Div блок? (https://javascript.ru/forum/misc/2261-kak-myshkojj-peremeshhat-div-blok.html)

Simon 29.11.2008 13:46

Как мышкой перемещать Div блок?
 
имеется DIV слой, можно ли при помощи CSS чтобы этот блок перемещался ?
то есть берём мышкой за некую часть этого блока и перемещаем, возможно так?

Snipe 29.11.2008 13:49

CSS, вроде, нельзя.

Simon 29.11.2008 14:01

в принципе не обязательно именно на CSS, можно и на JS, только как это сделать, никто не знает?

Octane 29.11.2008 14:12

Создаем абсолютно позиционированный блок. По событию onmousedown начинаем отслеживать onmousemove на всем документе и изменять top и left нашего блока в соответствии с координатами мыши. По событию onmouseup прекращаем все действия.

linbis 27.03.2009 18:15

function $(v) { return(document.getElementById(v)); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function xy(e,v) { return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX)); }

function dragOBJ(d,e) {

    function drag(e) { if(!stop) { d.style.top=(tX=xy(e,1)+oY-eY+'px'); d.style.left=(tY=xy(e)+oX-eX+'px'); } }

    var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;

    document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };

}

<div style="position: relative; top: 0; left: 0" onmousedown="dragOBJ(this,event); return false;">test</div>

twolf 28.03.2009 02:00

ого темку подняли...
linbis, а в браузерах попробовали использовать свой код? :)

Simon 28.03.2009 06:10

ухты, а неплохо кстати. Я проверял на всех браузерах(хром, лиса, опера, IE6.0), единственное во всех кроме IE6.0, почемуто когда берёшь объект мышкой, в нижней части браузера появляется прокрутка, как будто по ширине не влазиет, в IE6.0 всё в порядке с этим.

Simon 28.03.2009 14:09

вопрос нижней прокрутки отпал, сделал бокс, и прокрутки не стало. Прокрутка появлялась когда чисто один текст был. Сейчас ещё бы одну проблему решить, плавающий этот блок почемуто всегда под тегом списка <select> при перемещении блока список его закрывает, как это сделать можно?
вроде слышал что както можно через фрэймы решить вопрос, или может есть другой вариант, хотя если можно пример по фрэймам не отказался бы

Simon 29.03.2009 13:57

ну ктонить, подскажите плизз.. как сделать чтобы перемещаемый блок был выше всех элементов?

twolf 29.03.2009 21:07

z-index


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