Как мышкой перемещать Div блок?
 

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

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

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

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

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>

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

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

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

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

z-index

Simon, в IE нельзя сделать так, чтобы перемещаемый элемент был выше селектов, радио-баттонов и т.п.
Дело в том, что эти элементы рисуются IE системными средствами и после всего остального.
Насчет фреймов — не уверен.

Либо забить, либо реализовать свой селект:)

hogart,сделать можно, но как правильно не получается. Делается это через фреймы, когда я делал, фрэйм перекрывает основной блок, и взяться уже за перемещаемый блок нельзя(поскольку фрейм заполнил всю часть перемещаемого блока), но селект(список) в это время спрятан за перемещаемый блок.
А можно ли както средствами ява скрипта сделать, ну тоже чтобы компактно и не не большой код был?

Simon, перетаскивайте блок, который почти весь состоит из фрейма. *пожимает плечами* Как-то так, наверное…

Большое спасибо!
 

Код linbis очень сильно помог. Слегка доработав получил именно то, что нужно!
Спасибо!:thanks:

Stern87, класно, подскажи если есть возможность как доработал?

тот код действительно хороший, но я в ява скриптах очень мало разбираюсь и сделать мне будет очень сложно, былбы признателен если покажешь пример в работе :rolleyes:

А как можно сделать чтобы DIV перемещался только внутри выделенной области? А то так он по всей странице свободно перемещается.

попроще и с jquery

var mouse_event = 0
				var differenceX = 0
				var differenceY = 0
				$('#dialog_title').mousedown(function(e){
					differenceX = e.pageX-parseInt($('#dialog').css('left'))
					differenceY = e.pageY-parseInt($('#dialog').css('top'))
					mouse_event=1
				})
				document.onmouseup = function(){
					mouse_event = 0
				}
				document.onmousemove = function(e){
					if (mouse_event == 1){
						$('#dialog').css('left',e.pageX-differenceX)
						$('#dialog').css('top',e.pageY-differenceY)
					}
				}

<div id="dialog">
<div id="dialog_title">Title<spa id="dialog_close" style="position:absolute;right:5px;top:3px;cursor: hand;"></span></div>
<div id="dialog_content"></div>
</div>

Спасибо за полезный скрипт. Добавила вместо position:relative position:fixed и блок стал перемещаться при прокрутке(удобно не нужно его вниз страницы самому тащить).

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

А как сделать чтобы при достижении определёных координат блок останавливался?

Если не хотите вникать в DOM, используйте фреймворки (MooTools, JQuery). Там это давно и хорошо реализовано и с лимитами и с контейнерами и хендлами.
http://mootools.net/docs/more/Drag/Drag
http://docs.jquery.com/UI/Draggable

А как можно сделать такое - есть див (логин-форма), на этом диве еще лежат дочерние див-шапка, див-контент и див-подвал.

Как сделать чтобы форма таскалась мышью только за див-шапку?

Сейчас форма таскается за любое место, т.к. onmousedown указан у первого, родительского дива.

По-моему Илья Кантор достаточно развернуто описал о drag'n'drop: http://javascript.ru/ui/draganddrop

Вот готовый рабочий пример.
Паботает во всех броузерах
Взят из Source Code Library:

<!--
Add dragging to your div elements. just adding class=”drag” to
the div element will make it draggable.

You can set the area in which the div(s) can be dragged
using setdragBounds function
-->


<!doctype html public "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<style>
.Text{
font-family: Verdana,Arial,Sans-serif,'Times New Roman';
font-size: 9pt;
font-weight: normal;
font-style: normal;
color: #666;
text-decoration: none;
}

.alertsBoxTitle{
font-family: Verdana,Arial,Sans-serif,'Times New Roman';
font-size: 9pt;
font-weight: bold;
font-style: normal;
color: #ffffff;
text-decoration: none;
}
.alertsBox{
background: #ECF1F9;
border: 1px #a1bcdf solid;
}
body{
overflow:hidden;
}
</style>

<script language="javascript">
// browser detection
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);

var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
&& (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

var dragapproved=false
var z,x,y
var maxleft,maxtop,maxright,maxbottom;

function setdragBounds()
{
// you can set the bounds of the draggable area here
maxleft = 10;
maxtop = 10;
maxright = document.body.clientWidth - 10;
maxbottom = document.body.clientHeight - 100;
}

function move(e)
{
var tmpXpos = (!is_ie)? temp1+e.clientX-x: temp1+event.clientX-x;
var tmpYpos = (!is_ie)? temp2+e.clientY-y : temp2+event.clientY-y;
if (dragapproved)
{
z.style.left = tmpXpos;
z.style.top = tmpYpos;

if (tmpXpos < maxleft)
z.style.left = maxleft;

if (tmpXpos > maxright)
z.style.left = maxright;

if (tmpYpos < maxtop)
z.style.top = maxtop;
if (tmpYpos > maxbottom)
z.style.top = maxbottom;

return false
}
}

function drags(e)
{
if (!(is_ie)&&!(!is_ie)) return

var firedobj=(!is_ie)? e.target : event.srcElement
var topelement=(!is_ie)? "HTML" : "BODY"

while (firedobj.tagName!=topelement && firedobj.className!="drag" && firedobj.tagName!='SELECT' && firedobj.tagName!='TEXTAREA' && firedobj.tagName!='INPUT' && firedobj.tagName!='IMG')
{
// here you can add the elements that cannot be used for drag . using their class name or id or tag names
firedobj=(!is_ie)? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className=="drag")
{
dragapproved = true
z = firedobj
var tmpheight = z.style.height.split("px")
maxbottom = (tmpheight[0])?document.body.clientHeight - tmpheight[0]:document.body.clientHeight - 20;

temp1 = parseInt(z.style.left+0)
temp2 = parseInt(z.style.top+0)
x = (!is_ie)? e.clientX: event.clientX
y = (!is_ie)? e.clientY: event.clientY
document.onmousemove = move

return false
}
}

document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
</script>
</head>

<body>
<div id="Dialog" style="width:316px;height:119px;max-width:316px;position:absolute;top:50px;left:140px; z-index:1000;" class="drag">
<table width="100%" style="width:315px;height:119px" cellspacing="0" cellpadding="0" class="alertsBox" id="dialog_table">
<tr style="cursor:move">
<td class="alertsBoxTitle notselectable" colspan="2" align="left" height="21" style="cursor:move;background-color:#32426F">Drag Me</td>
</tr>
<tr>
<td align="center" colspan="2" height="5"> </td>
</tr>
<tr>
<td align="center" colspan="2">
<table width="97%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign='top' align="center">
</td>
</tr>
<tr>
<td valign='top' colspan="2" class="Text">You can place text here</td>
</tr>
<tr>
<td valign='top' colspan="2" align="center"><br/><input type="button" value="Ok"/></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>

Использую код который дали на первой странице:
Все работает хорошо. но только на ПК, на мобильных устройствах, андройд и ios вообще никак не реагирует, может кто знает можно ли это легко исправить?

welleant,

Почитайте про события на мобильных устройствах
(https://yandex.gik-team.com/?q=js+э...ойствах)

:dance: